水平和垂直居中 | 易学教程

水平居中

行内元素：给父元素添加 text-align: center;(文本 / 图片)

块级元素：

　　确定宽度：margin: 0 auto;

　　不确定宽度： 1. 把块级元素变成行内元素, display:inline-block; text-align:center;

　　　　　　　　 2. 给父元素设置浮动和相对定位及left: 50%; 子元素相对定位及left: 50%;

　　　　　　　　 3. table{margin: 0 auto;}

垂直居中

父级高度确定

　　单行文本：line-height: height;

　　多行文本、图片: 1. vertical-align:middle; (只有父级元素为td/th,或者图片) <IE8+>

　　　　　　　　　　2. father{display:table;} child{display:table-cell;vertical-align:middle} 用table-cell 来激活 vertical-align;eg：多行文字的水平垂直居中

多行文字的水平垂直居中

<style>
        .multiLineWordContainer{
            display: table-cell;
            border: 4px solid #beceeb;
            height: 300px;
            vertical-align: middle;
        }
    </style>
</head>
<body>
　　<div class="multiLineWordContainer">
        这里的文字用来做多行文字垂直居中对齐的测试。<br>
        这是第二行文字，您还可以再添加一行文字做测试！<br>
        这是第3行文字，您还可以再添加一行文字做测试！<br>
        这是第4行文字，您还可以再添加一行文字做测试！
　　</div>
</body>

大小不固定的图片

<style>
        ul,li{
            list-style: none;
            margin:0;
            padding:0;
        }
        ul{
            margin-top:10px;
        }
        li{
            height:128px;
            width:150px;
            padding:13px 0;
            float:left;
            margin-right:10px;
            border:1px solid #beceeb;
            text-align:center;
            font-size:0;
        }
//方式一
        .invisibilityImg{
            height:100%;
            width:1px;
            vertical-align:middle;
        }
        .showImg{
            vertical-align:middle;
        }
//方式二
        .ulImage li{
            height: 150px;
            text-align: center;
            line-height: 150px;
        }
        .ulImage li img{
            vertical-align:middle;
        }
    </style>
</head>
<body>
<ul class="imgContainer">
    <li>
        <img class="showImg" src="image/mm1.jpg" />
        <img class="invisibilityImg" src="image/pixel.gif"/>
    </li>
    <li>
        <img class="showImg" src="image/mm2.jpg" />
        <img class="invisibilityImg" src="image/pixel.gif"/>
    </li>
    <li>
        <img class="showImg" src="image/mm3.jpg" />
        <img class="invisibilityImg" src="image/pixel.gif"/>
    </li>
</ul>

<ul class="ulImage">
    <li><img src="image/mm1.jpg" /></li>
    <li><img src="image/mm2.jpg" /></li>
    <li><img src="image/mm3.jpg" /></li>
</ul>
</body>
</html>

参照：http://www.zhangxinxu.com/wordpress/?p=61

来源：https://www.cnblogs.com/mina-huojian66/p/6114514.html

标签

垂直居中

html居中

vertical-align