CSS_水平垂直居中总结

Posted 2022-04-02 江州益彤

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS_水平垂直居中总结相关的知识，希望对你有一定的参考价值。

https://segmentfault.com/a/1190000013966650

一、水平居中

1.1、行内元素水平居中

方式一：父元素设置 text-align: center
利用text-align: center可以实现在块级元素内部的行内元素水平居中。
此方法对行内元素(inline)，行内块(inline-block)，行内表(inline-table)，inline-flex元素水平居中都有效。

<style type="text/css">
    div 
        height:50px;
        border: 2px dashed #f69c55;
    
    .father 
        text-align: center;
    
</style>

<body>
    <div class="father">
        <span>王二毛</span>
    </div>
</body>

1.2 、块级元素水平居中

1.2.1、定宽高

子元素使用margin: 0 auto;

<style type="text/css">
    #father 
        width: 500px;
        height: 300px;
        background-color: skyblue;
        
    

    #son 
        width: 100px;
        height: 100px;
        background-color: rgb(29, 231, 29);
        margin: 0 auto;
    
</style>

<div id="father">
    <div id="son">我是块级元素</div>
</div>

1.2.2、不定宽高

父元素：
display: flex;
justify-content: center;

<style type="text/css">
    #father 
	     width: 500px;
	     height: 300px;
	     display: flex;
	     justify-content: center;
	     background-color: skyblue;
    

    #son 
    	/*定不定都可以*/
        /*width: 100px;
        height: 100px;*/
        background-color: rgb(29, 231, 29);
    
</style>

<div id="father">
    <div id="son">我是块级元素</div>
</div>

1.2.3、多块级元素水平居中

如果一行中有两个或两个以上的块级元素，通过设置块级元素的显示类型为inline-block和父容器的text-align属性从而使多块级元素水平居中。

<style type="text/css">
    .father 
        width: 500px;
        height: 300px;
        text-align: center;/*1*/
        background-color: skyblue;
    

    .son 
        width: 100px;
        height: 100px;
        margin: 0 8px;
        display: inline-block;/*2*/
        background-color: rgb(29, 231, 29);
    
</style>

<div class="father">
    <div class="son">我是块级元素</div>
    <div class="son">我是块级元素</div>
    <div class="son">我是块级元素</div>
</div>

二、垂直居中

2.1、行内元素垂直居中

2.1.1、单行行内元素垂直居中

设置行内元素的(line-height)和父级元素height的相等，从而使行内元素垂直居中。

<style type="text/css">
	  .father 
          width: 500px;
          height: 120px;
          background-color: skyblue;
      
	
      .son 
          line-height: 120px;
      
</style>

<div class="father">
   <span class="son">我是行内元素</span>
</div>

2.1.2、多行行内元素垂直居中

<style type="text/css">
    .father 
        width: 400px;
        height: 300px;
        display: table;
        background-color: skyblue;
    

    .son 
        display: table-cell;
        vertical-align: middle;
    
</style>

<div class="father">
    <span class="son">
        爱是什么？努力是人生的一种精神状态，是对生命的一种赤子之情。</span>
</div>

2.1.3、使用flex

<style type="text/css">
    .father 
        width: 400px;
        height: 300px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        background-color: skyblue;
    
</style>

<div class="father">
    <span class="son">
    爱是什么？努力是人生的一种精神状态，是对生命的一种赤子之情。
    </span>
</div>

2.2、块级元素垂直居中

2.2.1、固定高度的块级元素

<style type="text/css">
    .father 
        width: 400px;
        height: 200px;
        position: relative;
        background-color: skyblue;
    

    .son 
        height: 100px;
        position: absolute;
        top: 50%;
        margin-top: -50px;/*上移二分之一高度*/
        background-color: rgb(82, 241, 43);
    
</style>

<div class="father">
    <div class="son">
        我是块级元素
    </div>
</div>

2.2.2、不固定高度的块级元素

<style type="text/css">
   .father 
     	width: 400px;
        height: 200px;
        position: relative;
        background-color: skyblue;
    

    .son 
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background-color: rgb(36, 235, 46);
    
</style>
<div class="father">
    <div class="son">
        我是块级元素
    </div>
</div>

三、水平垂直居中

3.1、固定宽高元素水平垂直居中

通过margin平移元素整体宽度的一半，使元素水平垂直居中

<style type="text/css">
    .father 
        width: 400px;
        height: 200px;
        position: relative;
        background-color: skyblue;
    

    .son 
        width: 200px;
        height: 80px;
        padding: 10px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin: -50px 0 0 -110px;
        background-color: rgb(36, 235, 46);
    
</style>
<div class="father">
    <div class="son">
        我是块级元素
    </div>
</div>

3.2、固定或未知宽高元素水平垂直居中

3.2.1、position


 <style type="text/css">
 	.father 
    	width: 400px;
        height: 200px;
        position: relative;
        background-color: skyblue;
    

    .son 
        /* width: 200px;
        height: 80px; */
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: rgb(36, 235, 46);
    
</style>
<div class="father">
    <div class="son">
        我是块级元素
    </div>
</div>

3.2.2、利用flex布局(要考虑兼容性)

<style type="text/css">
    .father 
        width: 400px;
        height: 200px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: skyblue;
    

    .son 
        width: 200px;
        height: 80px;
        background-color: rgb(36, 235, 46);
    
</style>
<div class="father">
    <div class="son">
        我是块级元素
    </div>
</div>