css:CSS布局 - 水平 & 垂直居中

CSS布局 - 水平 & 垂直居中

1.元素水平居中&文本水平居中

<div class="center">
  <p>文本文本文本</p>
</div>

.center {//元素水平居中(.center的div)
    margin: 0 auto;
    width: 300px;
    border: 1px solid green;
}

.center {//文本水平居中
    text-align: center;
    border: 1px solid green;
}

2.图片水平居中

<p>注意要写 display: block;</p>
<img src="xx.jpg" alt="xx" style="width:40%">

img {
    display: block;
    margin: 0 auto;
}

3.垂直单行文本居中对齐(p中的文本)

<div class="center">
  <p>我是垂直居中的。</p>
</div>

.center {//设置padding上下对齐方式
    padding: 30px 0;
    border: 1px solid green;
}

.center {//设置height和line-height为一样的方式
    line-height: 200px;
    height: 200px;
    border: 3px solid green;
    text-align: center;
}
.center p {
    line-height: 1.5;
    display: inline-block;
    vertical-align: middle;
}
.center p还可以如下写法：（p有默认外边距使文本不能垂直居中）
.center p {
  margin:0;
}

.center { //使用 position 和 transform
    height: 200px;
    position: relative;
    border: 1px solid green; 
}
.center p {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

注：设置容器上下 padding 相同实现垂直居中和使用 line-height=height 实现垂直居中仅对单行文本有效，当文本行数超过单行时：

1）padding：文本仍然处于容器垂直居中的位置，但是容器的 height 会随着文本行数的增加而增大；
2）line-height=height：容器的 height 不变，line-height 是文本的行间距，文本会溢出容器显示；
多行文本可使用 vertical-align: middle; 来实现元素的垂直居中，但是如果子元素的内容体积大于父元素的内容体积时，仍然会溢出，后面需要使用文字溢出处理来解决。

4.垂直元素居中对齐（.center中的p元素）(宽度固定)

 .center {
            width: 400px;
            height: 400px;
            border: 1px solid blue;
            position: relative;
        }
        
.center p{
            width: 100px;
            height: 100px;
            background-color: orange;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -50px;
            margin-left: -50px;
}
另一种.center p写法:
 .center p{
            width:100px;
            height:100px;
            background: green;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            margin: auto;
        }

5.垂直元素居中对齐（宽度不固定）

.center {
            border: 1px solid red;
            width: 300px;
            height: 300px;
            position: relative;
 }
.center p{
            margin:0;
            background: green;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
 }

6.水平居中

.center {
            border: 1px solid red;
            width: 300px;
            height: 300px;
            display: table-cell;
            text-align: center;
            vertical-align: middle;
 }
        
.center p {
           // display: inline-block;
 }