常见的水平垂直居中方式

我将分为两个部分，一个是从行内元素，另一个是从块级元素两个部分来分享。水平垂直居中的方式很多，这篇文章就列举几种比较常见比较简单的方法。

行内元素

常见的行内元素有span标签、input标签、img标签等

第一种方法——适用于行内元素在块级元素中水平垂直居中。设置水平居中对齐，以及块级元素的高和行高相等即可。

html代码块

<div>
    <span>青春不常在，抓紧谈恋爱</span>
</div>
<div><a href="https://www.jianshu.com/">简书</a></div>
<div><input type="text"></div>

css代码块

<style>
    * {
        margin: 0;
        padding: 0;
    }/*清楚浏览器默认样式*/
        
    div {
        height: 100px;/*块级元素的高*/
        background-color: pink;
        margin-top: 10px;
        text-align: center;/*块级元素中的行内元素水平居中*/
        line-height: 100px;/*块级元素的行高与高相等，即可实现行内元素垂直居中*/
    }
</style>

效果图

行内元素水平垂直居中.png

无论浏览器是否缩放，无论浏览器窗口大小，行内元素都会实现水平垂直居中

第二种方法——适用于在块元素里存在两个及以上的行内元素均需要水平垂直居中时（如图片和文字需要水平垂直居中显示），可以通过对img标签或span标签（行内元素）设置vertical-align：middle，即可实现效果

html代码块

<div>
    <span>青春不常在，抓紧谈恋爱</span>
    <img src="./images/snow.jpg" height="300px">
</div>

css代码块

<style>
    * {
        margin: 0;
        padding: 0;
    }
    
    div {
        height: 300px;
        background-color: pink;
        text-align: center;/*水平居中对齐*/
    }
    
    img {
        vertical-align: middle;/*垂直居中，基线对齐*/
    }
</style>

效果图

图片和文字水平垂直居中.png

vertical-align属性的定义：该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。

块级元素

常见的块级元素有p标签、div标签等

第一种方法——先设置块级元素的宽高，然后利用定位和外边距将元素在水平和垂直方向上居中

html代码块

 <div class="father">
    <div class="son"></div>
</div>

css代码块

<style>
    * {
        margin: 0;
        padding: 0;
    }
    
    .father {
        width: 100%;
        height: 300px;
        background-color: pink;
        position: relative;/*父级元素相对定位*/
    }
    
    .father .son {
        width: 200px;
        height: 200px;
        background-color: skyblue;
        position: absolute;/*绝对定位*/
        top: 50%;
        left: 50%;
        margin-top: -100px;
        margin-left: -100px;
    }
</style>

效果图

块级元素1.png

第二种方法——已知元素宽高，然后将父级元素设置为弹性盒，然后设置子级元素的外边距为自动

html代码块

<div class="father">
    <div class="son"></div>
</div>

css代码块

<style>
    * {
        margin: 0;
        padding: 0;
    }
    
    .father {
        width: 100%;
        height: 300px;
        background-color: skyblue;
        display: flex;/*父级元素弹性盒子布局*/
    }
    
    .father .son {
        width: 200px;
        height: 200px;
        background-color: pink;
        margin: auto;/*外边距自动对齐*/
    }
</style>

效果图

块级元素2.png

第三种方法——已知元素宽高，然后利用定位和偏移量来设置元素水平和垂直方向上居中

html代码块

<div class="father">
    <div class="son"></div>
</div>

css代码块

<style>
    * {
        margin: 0;
        padding: 0;
    }
    
    .father {
        width: 100%;
        height: 300px;
        background-color: palegoldenrod;
        position: relative;
    }
    
    .father .son {
        width: 200px;
        height: 200px;
        background-color: palegreen;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
</style>

效果图

块级元素3.png

第四种方法——设置父元素display:table-cell; vertical-align: middle;给本身添加外边距自动对齐

html代码块

<div class="father">
    <div class="son"></div>
</div>

css代码块

<style>
    * {
        margin: 0;
        padding: 0;
    }
    
    .father {
        width: 500px;
        height: 500px;
        background-color: wheat;
        display: table-cell;
        vertical-align: middle;
    }
        
    .father .son {
        width: 200px;
        height: 200px;
        background-color: paleturquoise;
        margin: auto;
    }
</style>

效果图