html元素水平居中

在网页中将 HTML 元素水平居中，可以使用 CSS 中的 margin: 0 auto; 属性。以下是一种常用的实现方法：

<!DOCTYPE html>

<head>

<title>Horizontal Centering</title>

<style>

.center {

width: 300px; /* 设置元素宽度 */

margin: 0 auto; /* 水平居中 */

background-color: lightblue;

padding: 20px;

}

</style>

</head>

<body>

<p>This element is horizontally centered.</p>

</div>

</body>

</html>

在上面的示例中， center 类的元素使用了 width: 300px; 来设置宽度，然后通过 margin: 0 auto; 来实现水平居中。这样，无论屏幕宽度如何变化，元素都会始终水平居中显示。

您也可以将此样式应用到任何 HTML 元素（例如 div 、 span 、 p 等），以实现水平居中效果。

.水平居中的 margin：0 auto;

关于这个，大家也不陌生做网页让其居中用的比较多, 这个是用于子元素上的，前提是不受float影响

<style>
    *{
        padding: 0;
        margin: 0;
    }
        .box{
            width: 300px;
            height: 300px;
            border: 3px solid red;
            /*text-align: center;*/
        }
        img{
            display: block;
            width: 100px;
            height: 100px;
            margin: 0 auto;
        }
    </style>

<!--html-->
<body>
    <div class="box">
        ![](img1.jpg)
    </div>
</body>

我自己是一名从事了多年开发的web前端老程序员，目前辞职在做自己的web前端私人定制课程，去年我花了一个月整理了一份最适合2019年学习的web前端学习干货，各种框架都有整理，送给每一位前端小伙伴，想要获取的可以关注我的头条号并在后台私信我：前端，即可免费获取。

2.水平居中 text-align：center；

img的display：inline-block；类似一样在不受float影响下进行实在父元素上添加效果让它进行水平居中

<style>
    *{
        padding: 0;
        margin: 0;
    }
        .box{
            width: 300px;
            height: 300px;
            border: 3px solid red;
            text-align: center;
        }
        img{
            display: inline-block;
            width: 100px;
            height: 100px;
            /*margin: 0 auto;*/
        }
    </style>

<!--html-->
<body>
    <div class="box">
        ![](img1.jpg)
    </div>
</body>

3.水平垂直居中（一）定位和需要定位的元素的margin减去宽高的一半
这种方法的局限性在于需要知道需要垂直居中的宽高才能实现，经常使用这种方法

    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .box{
            width: 300px;
            height: 300px;
            background:#e9dfc7; 
            border:1px solid red;
            position: relative;
        }
        img{
            width: 100px;
            height: 150px;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -75px;
            margin-left: -50px;
        }
    </style>
<!--html -->
<body>
    <div class="box" >
        ![](2.jpg)
    </div>
</body>

4.水平垂直居中（二）定位和margin:auto;
这个方法也很实用，不用受到宽高的限制,也很好用

    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .box{
            width: 300px;
            height: 300px;
            background:#e9dfc7; 
            border:1px solid red;
            position: relative;

        }
        img{
            width: 100px;
            height: 100px;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }
    </style>
<!--html -->
<body>
    <div class="box" >
        ![](3.jpg)
    </div>
</body>

5.水平垂直居中（三）绝对定位和transfrom
这个方法比较高级了，用到了形变，据我所知很多大神喜欢使用这个方法进行定位，逼格很高的，学会后面试一定要用！这个是不需要知道居中元素的宽高就可以使用的，代码里的图片稍微有点大，改改宽高，仅此而已，在面试中大部分人会问如果不知道宽高该如何居中，答这个，加分！对transform不了解的同学可以查阅一下资料了解一下！

<style>
    *{
        padding: 0;
        margin: 0;
    }
    .box{
        width: 300px;
        height: 300px;
        background:#e9dfc7; 
        border:1px solid red;
        position: relative;

    }
    img{
        width: 100px;
        height: 100px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
    }
</style>
<!--html -->
<body>
    <div class="box" >
        ![](4.jpg)
    </div>
</body>

6.水平垂直居中（四）diplay：table-cell

其实这个就是把其变成表格样式，再利用表格的样式来进行居中，很方便

<style>
    .box{
            width: 300px;
            height: 300px;
            background:#e9dfc7; 
            border:1px solid red;
            display: table-cell;
            vertical-align: middle;
            text-align: center;
        }
        img{
            width: 100px;
            height: 150px;
            /*margin: 0 auto;*/  这个也行
        }
</style>
<!--html -->
<body>
    <div class="box" >
        ![](5.jpg)
    </div>
</body>

7.水平垂直居中（五）flexBox居中

这个用了C3新特性flex,非常方便快捷，在移动端使用完美，pc端有兼容性问题，以后会成为主流的

<style>
    .box{
            width: 300px;
            height: 300px;
            background:#e9dfc7; 
            border:1px solid red;
            display: flex;
            justify-content: center;
            align-items:center;
        }
        img{
            width: 150px;
            height: 100px;
        }
</style>
<!--html -->
<body>
    <div class="box" >
        ![](6.jpg)
    </div>
</body>

8.水平垂直居中（六）利用vertical-align:middle;
这方法不常见，但是一位朋友补充后我觉得也不失为一种好方法可以让别人刮目相看，这个方法关键要有一个和容器一样高的元素作为居中的一个参照就像b元素一样

<style>
    .wrap{
            width:300px;
            height:300px; 
            background:rgba(0,0,0,0.5);
            text-align:center;
            font-size:0;
            }
    .vamb{
        display:inline-block; 
        width:0px;
        height:100%;
        vertical-align:middle;
        }
    .test{
        display:inline-block;
        vertical-align:middle;
        font-size:16px;
        text-align:left;
        background:red;
        }
</style>
<body>
    <div class="wrap">
        <b class="vamb"></b>
        <div class="test">
        宽高不定<br>
        垂直水平居中
        </div>
    </div>
</body>

常见又实用的例子就先写到这，欢迎提意见，谢谢大家！喜欢请关注点个赞，也是对我的支持和鼓励！

作者：coderLfy链接：https://www.jianshu.com/p/a7552ce07c88

直居中-父元素高度确定的单行文本

父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的height和line-height高度一致来实现的。如下代码：

<div class="container">
hi,imooc!
</div>

css代码：

<style>
    .container{
    height:100px;
    line-height:100px; /* 仅能用于单行文本 */
    background:#999;
}
</style>

垂直居中-图片以及行内块元素

<div class="container">
<img src="imgegs/icon.png" />
</div>

css代码：

<style>
.container{
    height:100px;
    background:#999;
}
.container img{
    vertical-align:middle;
}
</style>

垂直居中-父元素高度确定的多行文本(方法一)

父元素高度确定的多行文本、图片、块状元素的竖直居中的方法有两种：

方法一：使用插入table(包括tbody、tr、td)标签, 同时设置vertical-align：middle。

说到竖直居中,css中有一个用于竖直居中的属性vertical-align,但这个样式只有在父元素为td 或th时,才会生效。所以又要插入table标签了。

下面看一下例子：

html代码：

<body>
<table><tbody><tr><td class="wrap">
<div>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
</div>
</td></tr></tbody></table>
</body>

css代码：

table td{height:500px;background:#ccc}

因为td标签默认情况下就默认设置了vertical-align为middle, 所以我们不需要显式地设置了。

垂直居中-父元素高度确定的多行文本(方法二)

在chrome、firefox及IE8以上的浏览器下可以设置块级元素的display为table-cell, 激活vertical-align属性, 但注意IE6、7并不支持这个样式。

html代码：

<div class="container">
<div>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
</div>
</div>

css代码：

<style>
.container{
    height:300px;
    background:#ccc;
    display:table-cell; /*IE8以上及Chrome、Firefox*/
    vertical-align:middle; /*IE8以上及Chrome、Firefox*/
}
</style>

这种方法的好处是不用添加多余的无意义的标签,但缺点也很明显,它的兼容性不是很好,不兼容 IE6、7。

垂直居中--方法三

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style type="text/css">
*{
    margin: 0;
    padding: 0;
}
div{
    width: 400px;
    height: 300px;
    background-color: orange;
}
/*
* 思路一：left:50%;top:50%;margin-left: -200px;margin-top: -150px;
* 思路二：left:0;top:0;right:0;bottom:0;margin:auto;
* */

div{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%); /* 平移 */
}
</style>
</head>
<body>
<div></div>
</body>
</html>

实例1:将内层div的文本垂直居中

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>父元素高度确定的多行文本</title>
<style>
.container{
    height:300px;
    background:#ccc;
    display:table-cell; /*IE8以上及Chrome、Firefox*/
    vertical-align:middle; /*IE8以上及Chrome、Firefox*/
}
</style>
</head>
<body>
<div class="container">
<div>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
</div>
</div>
<!--下面是代码任务区-->
</body>
</html>

实例2：将内层垂直居中、外层水平居中

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
#content{
    width:300px;
    height:300px;
    border:#000 solid 1px;
    margin:auto;
    display:table;
}
#wenzi{
    border:#F00 solid 1px;
    text-align:center;
    display:table-cell;
    vertical-align: middle;
}
</style>
</head>
<body>
<div id="content">
<div id="wenzi">
锄禾日当午，<br>
汗滴禾下土。<br>
谁知盘中餐，<br>
粒粒皆辛苦。<br>
</div>
</div>
</body>
</html>

实例3: 使用绝对定位垂直居中

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
*{
    margin: 0;
    padding: 0;
}
div{
    width: 220px;
    height: 280px;
    background: url("img/王思聪.jpg");
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -110px;
    margin-top: -140px;
}
</style>
</head>
<body>
<!--
行内元素(文本)->水平垂直居中
text-align: center;
line-height: height;
-->
<!--
块元素->水平垂直居中
margin: 0 auto;
-->
<div></div>
</body>
</html>

实例4: 使用绝对定位垂直居中

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
*{
    margin: 0;
    padding: 0;
}
div{
    width: 600px;
    height: 200px;
    padding: 10px 20px;
    border: 1px solid #000;
    border-radius: 5px;
    /* 下面这种写法也可以让一个盒子居中 */
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}
</style>
</head>
<body>
<div>您确定删除：重庆万州公交坠江事件结果公布后，司乘纠纷和公交驾驶安全问题成为人们热议的焦点，如何预防和避免恶性结果的发生，才是问题的关键。“鼓励市民举报，并对勇于制止干扰公交车正常行驶违法行为的公民予以奖励。”昨日下午，西安市公安局公共交通分局召开媒体通气会，通报西安相关安全举措。这条消息吗</div>
</body>
</html>

绝对定位(固定定位)之后, 所有标准流的规则, 都不适用了。所以margin:0 auto; 失效。

解决办法：left:50%; margin-left:负的宽度的一半。（三句话）

div{
width: 600px;
height: 60px;
position: absolute;  /* → 第一句  */
left: 50%;   //   /*  → 第二句   */ 
top: 0;
margin-left: -300px;    /*→ 第三句。宽度的一半*/
}

实例4：使用绝对定位和margin:auto垂直居中

在线咨询

上一篇：html5中meter标签的详细介绍
下一篇：网页设计必学：CSS四种样式引入方式及常用样式

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

html元素水平居中

您的项目需求