水平、垂直居中方式总结

2019年9月7日 125次阅读 来源: 司想君

我们在实际工作中经常会遇到需要水平居中或者垂直居中的场景，今天我们就来看一下如何设置水平居中和垂直居中。

水平居中

行内元素。

如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置text-align:center来实现的。

定宽块状元素。

当被设置元素为块状元素时用text-align：center就不起作用了，这时也分两种情况： 定宽块状元素 和 不定宽块状元素 。我们先来讲一讲定宽块状元素。
满足 定宽和块状 两个条件的元素是可以通过设置左右margin值为auto来实现居中的。

不定宽块状元素方法（一）

在实际工作中我们会遇到需要为“不定宽度的块状元素”设置居中，比如网页上的分页导航，因为分页的数量是不确定的，所以我们不能通过设置宽度来限制它的弹性。
不定宽度的块状元素有三种方法居中（这三种方法目前使用的都比多）：

加入 table 标签

<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>不定宽块状元素水平居中</title> 
<style> 
    table{ margin:0 auto; } /*下面是任务区代码*/ 
    .wrap{ background:#ccc; } 
</style>
</head> 
<body> 
    <div> 
        <table> 
            <tbody> 
                <tr>
                    <td> 
                        <div>设置我所在的div容器水平居中</div> 
                    </td>
                </tr> 
            </tbody>
         </table>
     </div>
 </body>
 </html>

设置 display;inline 方法

改变块级元素的 display 为 inline 类型，然后使用 text-align:center 来实现居中效果

设置 position:relative 和 left:50%;

通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left:-50% 来实现水平居中。

<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>不定宽块状元素水平居中</title> 
<style>
    .container{ float:left; position:relative; left:50% } 
    .wrap{ list-style:none; margin:0; padding:0; position:relative; left:-50%; } 
    .wrap-center{ background:#ccc; } 
</style> 
</head> 
<body> 
    <div> 
        <div> 
            <div>我们来学习一下这种方法。</div> 
        </div> 
    </div> 
</body> 
</html>

垂直居中

父元素高度确定的单行文本

父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的。

父元素高度确定的多行文本（方法一）

使用插入 table (包括tbody、tr、td)标签，同时设置 vertical-align：middle。
说到竖直居中，css 中有一个用于竖直居中的属性 vertical-align，但这个样式只有在父元素为 td 或 th 时，才会生效。因为 td 标签默认情况下就默认设置了 vertical-align 为 middle，所以我们不需要显式地设置了。

<!DOCTYPE HTML> 
<html> 
<head> 
<meta  charset="utf-8"> 
<title>父元素高度确定的多行文本</title> 
<style> 
    .wrap{height:400px;background:#ccc} 
</style> 
</head> 
<body> 
<table>
    <tbody>
        <tr>
            <td> 
                <div> 
                    <img src="http://img.mukewang.com/54ffac56000169c001840181.jpg" title="害羞的小女生"/> 
                </div> 
            </td>
        </tr>
    </tbody>
</table> <!--下面是代码任务区--> 
<div></div> 
</body> 
</html>

父元素高度确定的多行文本（方法二）

在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell，激活 vertical-align 属性，但注意 IE6、7 并不支持这个样式。
<!DOCTYPE HTML>
<html>
<head>
<meta  charset=”utf-8″>
<title>父元素高度确定的多行文本</title>
<style>

.container{ height:300px; background:#ccc; display:table-cell; vertical-align:middle;/*IE8以上及Chrome、Firefox*/ }

</style>
</head>
<body>

<div> 
    <div> 
        <img src="http://img.mukewang.com/54ffac56000169c001840181.jpg" title="害羞的小女生"/> 
    </div> 
</div> <!--下面是代码任务区--> 
<div></div>

</body>
</html>

    原文作者：司想君
    原文地址: https://segmentfault.com/a/1190000004553616
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞