css 水平垂直居中方案

水平居中方案

行内元素的水平居中

对父元素设置 text-align: center;

<div class="parent">
    <span class="child">我是行内元素 在父元素内水平居中</span>
</div>

<style>
    .parent {
        text-align:center;
    }
</style>

定宽块状元素的水平居中方案

<div class="parent">
  <div class="child" style="width: 100px;">
    另一种方法是使用table标签 让其表现为inline-block
  </div>
</div>

对定宽子元素设置 .child: {margin: 0 auto; }

绝对定位和负边距

.parent {
  background: yellow;
  height: 200px;
  position: relative;
}

.child {
  width: 100px;
  background: red;
  /*这个是最简单的*/
  /* margin: 0 auto; */
  
  position: absolute;
  left: 50%;
  margin-left: -100px; /*是根据自身的宽度width: 200px*50% 计算得来*/
  /*更好的方案是使用 transform: translateX(-100px)*/
}

定宽水平居中

不定宽块状元素的水平居中方案

对齐添加table标签, tbody, tr, td同样添加上, 然后将table看成定宽元素设置margin: 0 auto;
对于定宽块状也可以使用这种方案
缺点: 增加多余的标签, 不够语义化;

<div class="parent">
    <table class="table-center">
        <tbody>
            <tr>
                <td>
                    <div class="child">table居中方案</div>
                </td>
            </tr>
        </tbody>
    </table>
</div>

<style>
    .parent {
        background: yellow;
    }
    .table-center {
        margin: 0 auto;
    }
</style>

table水平居中

父元素浮动相对定位(宽度由子元素撑起),子元素相对自身向左移动50%的宽度距离

<style>
.container {
    background: dodgerblue;
    overflow: hidden;
    height: 200px;
}
.parent {
    float: left;
    position: relative;
    left: 50%;
}
.child {
    position: relative;
    left: -50%;
    background: red;
}
</style>

定宽浮动定位

垂直居中方案

行内元素的垂直居中

line-height针对单行元素居中方案使line-height = height

<div class="container" style="height: 200px;">
  <span class="child" style="line-height: 200px;">
    单行行内元素的垂直居中
  </span>
</div>

针对多行的display:table-cell方案

<style>
.container {
  height: 200px;
  background-color: dodgerblue;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
  /* margin-left: 20px; */
}

.child {
  /* line-height: 200px; */ /*单行情况下只设置行高等于高度 可以满足垂直居中*/
}
</style>

<div class="container">
  <span class="child">
    多行行内元素的垂直居中 <br>
    多行行内元素的垂直居中 <br>
    多行行内元素的垂直居中 <br>
    多行行内元素的垂直居中 <br>
    多行行内元素的垂直居中 <br>
    多行行内元素的垂直居中 <br>
  </span>
</div>

<div class="description" style="margin-top: 30px">
  <p>1. 使用了display:table-cell后margin不起作用 
  </p><p>2. 但值得注意的是：table-cell会被其他一些css属性破坏，比如float和position:absolute等等。
</p></div>

块状元素的垂直居中方案

line-height=height方案 (针对单行元素)
display:table-cell 和行内元素类似 (多行和单行)

定高父元素和定高子元素的垂直居中

<div class="parent">
  <div class="child">child元素定高</div>
</div>

<style>
.parent {
  height: 300px;
  background: yellow;
  margin: 0 auto;
  position: relative;
}

.child {
  position: absolute;
  border: 1px solid red;
  height: 100px;
  
  /*垂直居中  对于父元素和当前元素的高度已知的情况下*/
  top: 50%;
  margin-top: -50px;
  
  /*水平居中*/
  left: 50%;
  /* margin-left: -100px;  开启CPU渲染*/
  transform: translateX(-100px);
}
</style>

父元素和子元素定高

flex实现(见下方)

同时水平居中和垂直居中

flex方案

.parent {
  height: 300px;
  background: dodgerblue;
  display: flex;
  align-items: center;
  justify-content: center;
}

.child {
  width: 500px;
  background: #aaa;
  text-align: center;
}

flex水平垂直居中

子元素和父元素定宽定高下的方案

.parent {
  /* width: 500px; */
  height: 300px;
  background: yellow;
  margin: 0 auto;
  position: relative;
}

.child {
  position: absolute;
  border: 1px solid red;
  height: 100px;
  width: 200px;
  
  /*垂直居中  对于父元素和当前元素的高度已知的情况下*/
  top: 50%;
  margin-top: -50px;
  
  /*水平居中*/
  left: 50%;
  /* margin-left: -100px;  开启CPU渲染*/
  transform: translateX(-100px);
}

绝对定位和负边距

css 水平 垂直居中方案

水平居中方案

垂直居中方案

同时水平居中和垂直居中

推荐阅读更多精彩内容

css 水平垂直居中方案