水平居中

Posted 爬坡的猪

tags:

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

方案一

位置 属性名 意义
父div text-align center 让子元素居中
子div display inline-block 可以将对象呈递为内联对象,但是对象的内容作为块对象呈递。inline-block的宽度是其中文字的宽度。
子div text-align left 让子元素中的文字不继承父div 的  text-align:center属性, 设置为默认的text-align:left
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>水平居中--方案一</title>
    <style type="text/css">
    /*优点:兼容IE低版本浏览器*/
    .parent{ text-align: center; }
    .child{display: inline-block;
            text-align: left;}
    </style>
</head>
<body>
    <div class="parent" style="width: 400px;height: 100px;background: red;">
        <div class="child" style="width: 80px;height: 100px;background: green;">
            <h1>DEMO</h1>
        </div>
    </div>
</body>
</html>

 

image

 

 

 

方案二

位置 属性名 意义 兼容性
子div display table table的表现上和block非常像,但是它和block元素有区别,『宽度也是跟着内容走』 IE8以上
子div margin 0 auto 上下为0  左右为『自动』  
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>水平居中table_margin</title>
    <style type="text/css">
    .child{display: table;
            margin: 0 auto;
        }
    </style>
</head>
<body>
<div class="parent" style="width: 400px;height: 100px;background: red;">
    <div class="child" style="height: 100px;background: green;text-align: center">DEMO</div>
</div>
</body>
</html>

image

 

 

 

方案三---绝对定位+transform

位置 属性名 意义 兼容性
父div position relative 相对定位,将父元素设置为一个参照物  
子div position absolute 绝对定位,宽度由内容决定  
子div left 50% 把子div的左边缘设置在其父元素左边缘向右 父元素50%宽度的位置:  
子div transform 0 auto 上下为0  左右为『自动』 css3新增,IE老版本不支持
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>水平居中absolute_transform</title>
    <style type="text/css">
    .parent{
        position: relative;
    }
    .child{
        position: absolute; /* absolute元素默认没有宽度,宽度由内容决定*/
        left: 50%;  /*以父元素为参照物,向左移动父类元素宽度的50%*/
        transform: translateX(-50%);  /*css3新增 以自身的宽度的50%向左边移动 */
    }
    </style>
</head>
<body>
<div class="parent" style="width: 400px;height: 100px;background: #403f42;">
    <div class="child" style="width: 200px;height: 100px;background: red;color: white;">
        DEMO
    </div>
</div>
</body>
</html>

image

缺点: transform 属性为css3新增,IE老版本(IE6,7,8)中无法使用。

 

 

 

方案四

位置 属性名 意义 兼容性
父div display flex 父元素的display 为 flex时,子元素自然就成为了flex item。flex 默认情况下,宽度是auto的。  
父div justify-content center

项目位于容器的中心。

 
或者        
子div margin 0 auto    
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>水平居中flex_justify-content</title>
    <style type="text/css">
    .parent{
        display: flex;    /* 当父类元素是display为flex时,其中的子元素就会变为 flex item,子元素的宽度就为文字的实际宽度  */
        justify-content: center;
    }
    </style>
</head>
<body>
<div class="parent" style="width: 400px;height: 100px;background: #403f42;">
    <div class="child" style="height: 100px;background: red;color: white;">
        DEMO
    </div>
</div>
</body>
</html>

image

 

 

 

或者,在子元素中设置 margin 属性:上下为0 ,左右自动(居中)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>水平居中flex_justify-content</title>
    <style type="text/css">
    .parent{
        display: flex;    /* 当父类元素是display为flex时,其中的子元素就会变为 flex item,子元素的宽度就为文字的实际宽度  */
    }
    .child{
        margin: 0 auto;
    }
    </style>
</head>
<body>
<div class="parent" style="width: 400px;height: 100px;background: #403f42;">
    <div class="child" style="height: 100px;background: red;color: white;">
        DEMO
    </div>
</div>
</body>
</html>

效果相同

image

 

缺点:  flex 在IE低版本中不支持。

以上是关于水平居中的主要内容,如果未能解决你的问题,请参考以下文章

CSS代码片段

前端面试CSS系列——DIV垂直水平居中

怎么使用CSS让图片水平垂直都居中?

css html 如何将图片img标签 水平居中 垂直居中 和水平垂直居中

css html 如何将图片img标签 水平居中 垂直居中 和水平垂直居中

html能设置图片水平和垂直居中吗?