水平居中

Posted 2020-08-16 爬坡的猪

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>

方案二

位置	属性名	值	意义	兼容性
子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>

方案三---绝对定位+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>

缺点： 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>

或者，在子元素中设置 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>

效果相同

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

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

CSS代码片段

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

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

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

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