普通元素垂直水平居中原理、单行多行文字垂直水平居中

作者: sdcV | 来源:发表于2017-07-21 22:14 被阅读55次

所有CSS居中方法，了解一下？
居中
CSS水平垂直居中总结
CSS中几种常用的居中
css居中完全指北
css多行垂直水平居中--table布局大法
普通元素垂直水平居中原理、单行多行文字垂直水平居中
css居中方式总结（亲测有效）
各种居中以及文字一行内展示
CSS布局小技巧

一、普通元素三种垂直水平居中

如图：

image.png

<div class="main"> //html结构
    <div class="content"></div>
</div>
.main{   //main的样式
     width: 100px;
     height: 100px;
     background-color: #ff7f50;
     display: flex;
     align-items: center;
     justify-content: center;
}

absolute小技巧</b>

.content1{
    width: 100px;
    height: 100px;
    background-color: #20b2aa;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

原理：利用绝对定位元素的盒模型特性，在偏移属性为确定值的基础上，设置margin:auto。

translate()函数

.content2{
    width: 100px;
    height: 100px;
    background-color: #20b2aa;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

原理：利用绝对定位元素的偏移属性和translate()函数的自身偏移达到水平垂直居中的效果[注意]IE9-浏览器不支持。

使用flex

.main{
    width: 100px;
    height: 100px;
    background-color: #ff7f50;
    display: flex;
    align-items: center;
    justify-content: center;
}

原理：在伸缩容器上使用主轴对齐justify-content和侧轴对齐align-items。

二、文字居中垂直水平居中

image.png

<div class="middle-box"> //html结构
    <div class="middle-inner">
        <p>good good study,</p>
        <p>day day up!</p>
    </div>
</div>

1 单行文字垂直居中

text-align: center;
line-height = height;

2 多行文字垂直水平居中

第一种display:table的方法

.middle-box {
    display: table;
    height: 200px;
    width: 200px;
    background-color: #20B2AA;
}

.middle-inner {
   display: table-cell;
   vertical-align: middle;
   text-align: center;
}
缺点就是不兼容ie6、ie7.怎么兼容呢？
两者写法：
 1、条件语句写法
 <!--[if lt IE 8]>
 <style>
    .middle-inner { position: absolute; top:50%;}
    .middle-inner p {position: relative; top: -50%}
 </style>
 <![endif]-->
 2、ie hack写法
 .middle-box {
     display: table;
     height: 300px;
     border: 1px solid #ff0000;
     width: 400px;
     margin: 0 auto;
     position: relative;
 }

 .middle-inner {
     display: table-cell;
     vertical-align: middle;
     *position: absolute;
     *top: 50%;
     *left: 50%;
     width: 100%;
     text-align: center;
 }

 .middle-inner p {
     position: relative;
     *top: -50%;
     *left: -50%;
 }