您现在的位置:首页 >> 前端 >> 内容

块级元素在父级元素中水平居中、垂直居中的代码实现教程

时间:2018/3/30 14:29:01 点击:

  核心提示:1.水平居中:style#parent{width:300px;height:300px;background:#e5e5e5;}.child{width:150px;margin:0 auto;ba...

1.水平居中:

<style>  
        #parent{  
            width:300px;height:300px;background:#e5e5e5;  
        }  
        .child{width:150px;margin:0 auto;background:red;}  
    </style>  
    <p id="parent">  
        <p class="child">  
            today is a funny day!  
        </p>  
    </p>  

块级元素在父级元素中水平居中、垂直居中的代码实现教程

2.垂直居中:

<style>  
        #parent{  
            position:relative;height:300px;background:#e5e5e5;  
        }  
        .child{position:absolute;top:0;bottom:0;background:red;margin:auto 0;text-decoration:center;width:140px;height:20px;}  
    </style>  
    <p id="parent">  
        <p class="child">  
            today is a funny day!  
        </p>  
    </p>  

3.垂直居中还用vertical-align:middle;经常搭配父元素display:table-cell;使用

块级元素在父级元素中水平居中、垂直居中的代码实现教程

作者:网络 来源:Delicia_La