CSS主流布局--垂直居中布局

CSS主流布局–垂直居中布局

垂直居中布局

是使得父级元素容器中的子元素保持垂直居中布局的方式

常见两种垂直居中布局的方式

-table-cell+vertical-align属性配合使用
-absolute+transform属性配合使用

table-cell+vertical-align属性配合使用

HTML

<!--父级元素-->
<div class="parent">
<!--    子级元素-->
    <div class="child"></div>
</div>

css

 .parent{
            width: 200px;
            height: 600px;
            background-color: skyblue;
            vertical-align: middle;
            display: table-cell;
          }
  .child {
            width: 200px;
            height: 200px;
            background-color: lightsalmon;
        }

vertical-align属性用于使文本垂直对齐的方式，常见的属性值有top,middle,bottom
display属性的table属性值相当与<table>元素的布局，table-cell相当于<td>元素的布局。

第一种解决方案的优点与缺点

优点

浏览器的兼容性好，因为属性都兼容老版本的浏览器。

缺点

vertical-align与text-align属性一样都具有继承性，在父级元素中添加文本也会显示出垂直居中的效果。
HTML

<!--父级元素-->
<div class="parent">
<!--    子级元素-->
    文本布局
    <div class="child"></div>
</div>

CSS代码不变。

absolute+transform属性配合使用

HTML

<!--父级元素-->
<div class="parent">
<!--    子级元素-->
    <div class="child"></div>
</div>

CSS

 .parent{
            width: 200px;
            height: 600px;
            background-color: skyblue;
            position: absolute;
          }
        .child {
            width: 200px;
            height: 200px;
            background-color: lightsalmon;
            position: absolute;
            top:50%;
            transform:tanslateY(-50%);
        }

如果子级元素开启定位父级元素没有开启定位，子级元素相对于页面进行定位；
如果子级元素开启定位，父级元素也开启定位，子级元素相对于父级元素进行定位。
transform:translateY(-100px),子级元素向上平移-100px，一般使用-50%更好

第二种解决方案的优缺点

优点

父级元素是否脱离文档流，都不会影响子级元素垂直居中的效果

缺点

transform是CSS3中的属性因此对浏览器的兼容性支持并不友好。