css上下左右居中

最新推荐文章于 2024-03-26 16:45:51 发布

coodingcc

最新推荐文章于 2024-03-26 16:45:51 发布

阅读量1.9k

点赞数 1

分类专栏：前端文章标签： css css3 定位

本文链接：https://blog.csdn.net/cristina_song/article/details/82799479

版权

前端专栏收录该内容

93 篇文章 1 订阅

订阅专栏

未脱离文档流定位的元素（position：static || relative）

脱离文档流定位的元素（position: absolute || fixed）

宽高100%,auto或者不设置继承最近父级

在使用height: 100%;时需要注意的一些事项

1.div单独设置height: 100%;不起作用，须设置

html,body{
  height:100%;
  width: 100%;
  overflow: hidden;
}
*{
  margin: 0;
  padding: 0;
}
ul,li{
  list-style: none;
}

例子如下：

<html style="height: 100%;">
  <body style="height: 100%;">
    <div style="height: 100%;">
      <p>
        这样这个div的高度就会100%了
      </p>
    </div>
  </body>
</html>

2.margin 和 padding 会让你的页面出现滚动条，为避免这种情况在页面开始阶段设置

{ margin:0;
  padding:0;
  height:100%;}

3.如果你的元素实际高度大于你设定的百分比高度，那元素的高度会自动扩展。

垂直居中

line-height=父heiht
vertical-align对一些特定显示样式（例如单元格显示方式：table-cell）的元素才会起作用。所以要实现垂直居中对齐，可以采用如下样式

display:table-cell;      /*按照单元格的样式显示元素*/
vertical-align:middle;   /*垂直居中对齐*/

这种设置方式相比设置line-height，可以兼容文字有多行的情形。

左右居中

text-align:center；针对内联元素左右居中
对于块状元素设置inline-block，text-align:center；才会起作用。或者使用margin:0 auto;
margin: 0 auto水平居中无效的解决方法

首先需要居中的元素必须能设置宽度(display: block;)
设置需要居中的元素宽度

<div class="box">
      <img src="" alt="" class="center">
</div>

.box{
  width: 400px;
}
.center{
  display: block;  // 块级元素可以不加
  width: 100px;   // 必须要有
  margin: 0 auto;
}

上下左右居中三种情景

情景一：一个浏览器页面中，只有一个div模块，让其上下左右居中

解决方案：  {  position:fixed;
　　　　　　   left:0;
　　　　　　　 right:0;
　　　　　　　 top:0;
　　　　　　　 bottom:0;
　　　　　　 }

备注：此处使用position:fixed为最佳方案，因为position：fixed定位是相对于整个浏览器页面的。

情景二：一个父元素div，一个已知宽度、高度的子元素div(200*300)

　　　　解决方案： 1、position布局
　　　　　　　　　　　　　{
　　　　　　　　　　　　　　position:absolute/fixed;
　　　　　　　　　　　　　　top:50%;
　　　　　　　　　　　　　　left:50%;
　　　　　　　　　　　　　　margin-left:-100px;
　　　　　　　　　　　　　　margin-top:-150px;
　　　　　　　　　　　　　　}

情景三:一个父元素div，一个未知宽度、高度的子元素div

  解决方案： 1、position布局，position设为absolute，其他同情景一
  　　　　　 2、display：table
  　　　　　　　　　　　　父级元素：{ display:table;}
  　　　　　　　　　　　　子级元素： { display:table-cell;vertical-align:middle }
  　　　　　 3、flex布局
                      父级元素：{
                        display:flex;
                        flex-direction:row; /* 子元素横向排列 */
                        justify-content:center;/* 相对父元素水平居中 */
                        align-items:center;/*  子元素相对父元素垂直居中 */
                      　　　　　　　　}
                      子级元素不设置
  　　　　　 4、translate
             子级元素：{
                          position: absolute;
                          top:50%;
                          left: 50%;
                          -webkit-transform: translate(-50%, -50%);
                          -moz-transform: translate(-50%, -50%);
                          -ms-transform: translate(-50%, -50%);
                          -o-transform: translate(-50%, -50%);
                          transform: translate(-50%, -50%);
                      }

coodingcc

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
css上下左右居中

未脱离文档流定位的元素（position：static || relative）脱离文档流定位的元素（position: absolute || fixed）宽高100%,auto或者不设置继承最近父级在使用height: 100%;时需要注意的一些事项1.div单独设置height: 100%;不起作用，须设置html,body{ height:100%; width: 1...
复制链接

扫一扫