15种CSS居中的方式，你都用过哪几种？

最新推荐文章于 2021-10-27 23:47:05 发布
最新推荐文章于 2021-10-27 23:47:05 发布
阅读量314 收藏 2
点赞数
640?wx_fmt=png
来源 | https://cloud.tencent.com/developer/article/1115615
CSS居中是前端工程师经常要面对的问题，也是基本技能之一。 今天有时间把CSS居中的方案汇编整理了一下，目前包括水平居中，垂直居中及水平垂直居中方案共15种。 如有漏掉的，还会陆续的补充进来，算做是一个备忘录吧。

1 、水平居中

01、 内联元素水平居中

利用 text-align: center 可以实现在块级元素内部的内联元素水平居中。 此方法对内联元素( inline ), 内联块( inline-block ), 内联表( inline-table ), inline-flex 元素水平居中都有效。
Demo代码： 
<!DOCTYPE HTML>	
<html>	
<head>	
    <meta charset="utf-8">	
    <title>42度空间-内联元素水平居中-测试1</title>	
    <style>	
        div {	
            height:60px;	
            border: 2px dashed #f69c55;	
        }	
        .center-text {	
            text-align: center;	
        }	
</style>	
</head>	
<body>	
<div class="center-text">	
    简单是稳定的前提。	
</div>	
</body>	
</html>

02、 块级元素水平居中

通过把固定宽度块级元素的 margin-left 和 margin-right 设成auto，就可以使块级元素水平居中。
Demo代码： 
<!DOCTYPE HTML>	
<html>	
<head>	
    <meta charset="utf-8">	
    <title>42度空间-块级元素水平居中</title>	
    <style>	
        div {	
            height:100px;	
            border: 2px dashed #f69c55;	
        }	
        .center-block {	
            margin: 0 auto;	
            width: 8rem;	
            padding:1rem;	
            color:#fff;	
            background:#000;	
        }	
</style>	
</head>	
<body>	
<div>	
    <p class="center-block">	
        简单不先于复杂，而是在复杂之后。	
    </p>	
</div>	
</body>	
</html>

03、多块级元素水平居中，利用inline-block

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

Demo代码： 
<!DOCTYPE HTML>	
<html>	
<head>	
    <meta charset="utf-8">	
    <title>42度空间-多块级元素水平居中-inline-block</title>	
    <style>	
        .container {	
            height:100px;	
            padding: 8px;	
            text-align: center;	
            border: 2px dashed #f69c55;	
        }	
        .inline-block {	
            padding: 8px;	
            width: 4rem;	
            margin: 0 8px;	
            color: #fff;	
            background: #000;	
            display: inline-block;	
        }	
</style>	
</head>	
<body>	
<div class="container">	
    <div class="inline-block">	
        简单不先于复杂	
    </div>	
    <div class="inline-block">	
        而是在复杂之后	
    </div>	
    <div class="inline-block">	
        简单不先于复杂，而是在复杂之后。	
    </div>	
</div>	
</body>	
</html>
04、多块级元素水平居中，利用display: flex
利用弹性布局( flex )，实现水平居中，其中 justify-content 用于设置弹性盒子元素在主轴（横轴）方向上的对齐方式，本例中设置子元素水平居中显示。
Demo代码： 
<!DOCTYPE HTML>	
<html>	
<head>	
    <meta charset="utf-8">	
    <title>42度空间-多块级元素水平居中-弹性布局</title>	
    <style>	
        .flex-center {	
            padding: 8px;	
            display: flex;	
            justify-content: center;	
            border: 2px dashed #f69c55;	
        }	
        .flex-center >div {	
            padding: 8px;	
            width: 4rem;	
            margin: 0 8px;	
            color: #fff;	
            background: #000;	
        }	
</style>	
</head>	
<body>	
<div class="flex-center">	
    <div>	
        简单不先于复杂。	
    </div>	
    <div>	
        简单不先于复杂，而是在复杂之后。	
    </div>	
    <div>	
        而是在复杂之后。	
    </div>	
</div>	
</body>	
</html>

2、 垂直居中

05、单行内联(inline-)元素垂直居中

通过设置内联元素的高度( height )和行高( line-height )相等，从而使元素垂直居中。
Demo代码： 
<!DOCTYPE HTML>	
<html>	
<head>	
    <meta charset="utf-8">	
    <title>42度空间-单行内联元素垂直居中-line-height</title>	
    <style>	
        #box {	
            height: 120px;	
            line-height: 120px;	
            border: 2px dashed #f69c55;	
        }	
</style>	
</head>	
<body>	
<div id="box">	
    软件在能够复用前必须先能用。	
</div>	
</body>	
</html>

06、多行元素垂直居中， 利用表布局（table）

利用表布局的 vertical-align: middle 可以实现子元素的垂直居中。
Demo代码： 
<!DOCTYPE HTML>	
<html>	
<head>	
    <meta charset="utf-8">	
    <title>42度空间-多行内联元素垂直居中-table</title>	
    <style>	
        .center-table {	
            display: table;	
            height: 140px;	
            border: 2px dashed #f69c55;	
        }	
        .v-cell {	
            display: table-cell;	
            vertical-align: middle;	
        }	
</style>	
</head>	
<body>	
<div class="center-table">	
    <p class="v-cell">The more technology you learn, the more you realize how little you know.</p>	
</div>	
</body>	
</html>
07、多行元素垂直居中，利用flex布局（flex）
利用flex布局实现垂直居中，其中 flex-direction: column 定义主轴方向为纵向。 因为flex布局是CSS3中定义，在较老的浏览器存在兼容性问题。
Demo代码： 
<!DOCTYPE HTML>	
<html>	
<head>	
    <meta charset="utf-8">	
    <title>42度空间-多行内联元素垂直居中-flex</title>	
    <style>	
        .center-flex {	
            height: 140px;	
            display: flex;	
            flex-direction: column;	
            justify-content: center;	
            border: 2px dashed #f69c55;	
        }	
</style>	
</head>	
<body>	
<div class="center-flex">	
    <p>Dance like nobody is watching, code like everybody is.</p>	
</div>	
</body>	
</html>
08、多行元素垂直居中， 利用“精灵元素”
利用“精灵元素”(ghost element)技术实现垂直居中，即在父容器内放一个100%高度的伪元素，让文本和伪元素垂直对齐，从而达到垂直居中的目的。
Demo代码： 
<!DOCTYPE HTML>	
<html>	
<head>	
    <meta charset="utf-8">	
    <title>42度空间-多行内联元素垂直居中-伪元素</title>	
    <style>	
        .ghost-center {	
            position: relative;	
            border: 2px dashed #f69c55;	
            padding: 10px 0;	
        }	
        .ghost-center::before {	
            content: " ";	
            display: inline-block;	
            height: 100%;	
            width: 1%;	
            vertical-align: middle;	
        }	
        .ghost-center p {	
            display: inline-block;	
            vertical-align: middle;	
            width: 12rem;	
            padding:1rem;	
            color:#fff;	
            background:#000;	
        }	
</style>	
</head>	
<body>	
<div class="ghost-center">	
    <p>“你毕业才两年，这三年工作经验是怎么来的？”程序员答：“加班。”</p>	
</div>	
</body>	
</html>
09、块级元素垂直居中，固定高度的块级元素
我们知道居中元素的高度和宽度，垂直居中问题就很简单。 通过绝对定位元素距离顶部50%，并设置 margin-top 向上偏移元素高度的一半，就可以实现垂直居中了。
Demo代码： 
<!DOCTYPE HTML>	
<html>	
<head>	
    <meta charset="utf-8">	
    <title>42度空间-固定高度的块元素垂直居中</title>	
    <style>	
        .parent {	
            height: 140px;	
            position: relative;	
            border: 2px dashed #f69c55;	
        }	
        .child {	
            position: absolute;	
            top: 50%;	
            height: 100px;	
            margin-top: -50px;	
            color:#fff;	
            background: #000;	

	
        }	
</style>	
</head>	
<body>	
<div class="parent">	
    <div class="child">控制复杂性是计算机编程的本质。</div>	
</div>	
</body>	
</html>
10、块级元素垂直居中， 未知高度的块级元素
当垂直居中的元素的高度和宽度未知时，我们可以借助CSS3中的 transform 属性向Y轴反向偏移50%的方法实现垂直居中。 但是部分浏览器存在兼容性的问题。
Demo代码： 
<!DOCTYPE HTML>	
<html>	
<head>	
    <meta charset="utf-8">	
    <title>42度空间-未知高度的块元素垂直居中</title>	
    <style>	
        .parent {	
            height: 140px;	
            position: relative;	
            border: 2px dashed #f69c55;	
        }	
        .child {	
            position: absolute;	
            top: 50%;	
            transform: translateY(-50%);	
            background: black;	
            color: #fff;	
            padding: 1rem;	
            width: 12rem;	
        }	
</style>	
</head>	
<body>	
<div class="parent">	
    <div class="child">世界上有 10 种人，懂二进制的和不懂二进制的。</div>	
</div>	
</body>	
</html>

3 、水平垂直居中

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

通过margin平移元素整体宽度的一半，使元素水平垂直居中。
Demo代码： 
<!DOCTYPE HTML>	
<html>	
<head>	
    <meta charset="utf-8">	
    <title>42度空间-固定宽高元素水平垂直居中</title>	
    <style>	
        .parent {	
            height: 140px;	
            position: relative;	
            border: 2px dashed #f69c55;	
        }	
        .child {	
            width: 200px;	
            height: 80px;	
            padding: 10px;	
            position: absolute;	
            top: 50%;	
            left: 50%;	
            margin: -50px 0 0 -110px;	
            background: black;	
            color: #fff;	
        }	
</style>	
</head>	
<body>	
<div class="parent">	
    <div class="child">控制复杂性是计算机编程的本质。</div>	
</div>	
</body>	
</html>

12、未知宽高元素水平垂直居中

利用2D变换，在水平和垂直两个方向都向反向平移宽高的一半，从而使元素水平垂直居中。
Demo代码： 
<!DOCTYPE HTML>	
<html>	
<head>	
    <meta charset="utf-8">	
    <title>42度空间-未知宽高元素水平垂直居中</title>	
    <style>	
        .parent {	
            height: 140px;	
            position: relative;	
            border: 2px dashed #f69c55;	
        }	
        .child {	
            padding: 10px;	
            position: absolute;	
            top: 50%;	
            left: 50%;	
            transform: translate(-50%, -50%);	
            color: #fff;	
            background: black;	
        }	
</style>	
</head>	
<body>	
<div class="parent">	
    <div class="child">当你试图解决一个你不理解的问题时，复杂化就产成了。</div>	
</div>	
</body>	
</html>

13、 利用flex布局

利用flex布局，其中 justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式； 而 align-items 属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。
Demo代码： 
<!DOCTYPE HTML>	
<html>	
<head>	
    <meta charset="utf-8">	
    <title>42度空间-利用flex布局实现元素水平垂直居中</title>	
    <style>	
        .parent {	
            height: 140px;	
            display: flex;	
            justify-content: center;	
            align-items: center;	
            border: 2px dashed #f69c55;	
        }	
        .child {	
            padding: 20px;	
            background: black;	
            color: #fff;	
        }	
</style>	
</head>	
<body>	
<div class="parent">	
    <div class="child">Facebook wasn't built in a day.</div>	
</div>	
</body>	
</html>

14、 利用grid布局

利用grid实现水平垂直居中。
Demo代码： 
<!DOCTYPE HTML>	
<html>	
<head>	
    <meta charset="utf-8">	
    <title>42度空间-利用grid布局实现元素水平垂直居中</title>	
    <style>	
        .parent {	
            height: 140px;	
            display: grid;	
            align-items:center;	
            border: 2px dashed #f69c55;	
        }	
        .child {	
            margin:auto;	
            padding: 20px;	
            width:10rem;	
            color: #fff;	
            background: black;	
        }	
</style>	
</head>	
<body>	
<div class="parent">	
    <div class="child">好的程序员能写出人能读懂的代码。</div>	
</div>	
</body>	
</html>

15、 屏幕上水平垂直居中

屏幕上水平垂直居中十分常用，常规的登录及注册页面都需要用到。 要保证较好的兼容性，还需要用到表布局。
Demo代码： 
<!DOCTYPE HTML>	
<html>	
<head>	
    <meta charset="utf-8">	
    <title>42度空间-如何使DIV在屏幕上水平垂直居中显示？兼容性要好</title>	
    <style>	
        .outer {	
            display: table;	
            position: absolute;	
            height: 100%;	
            width: 100%;	
        }	
        .middle {	
            display: table-cell;	
            vertical-align: middle;	
        }	
        .inner {	
            margin-left: auto;	
            margin-right: auto;	
            background: #2b2b2b;	
            color:#fff;	
            padding: 2rem;	
            max-width: 320px;	
        }	
    </style>	
</head>	
<body>	
<div class="outer">	
    <div class="middle">	
        <div class="inner">	
            <p>一个好的程序员应该是那种过单行线都要往两边看的人。</p>	
            <button value="add" id="add">增加内容</button>	
        </div>	
    </div>	
</div>	
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>	
<script type="text/javascript">	
    $(document).ready(function () {	
        $("#add").click(function () {	
            $("p").after("<p>解决问题大多数都很容易；找到问题出在哪里却很难。</p>");	
        });	
    });	
</script>	
</body>	
</html> width: 400px;	
}

4 说明

文中所述文字及代码部分汇编于网络。 因时间不足，能力有限等原因，存在文字阐述不准及代码测试不足等诸多问题。 因此只限于学习交流范围，如果需要进行实际应用的话，请自行把握。
640?wx_fmt=jpeg
640?wx_fmt=png
web前端开发V
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css 水平垂直居中的几种常见方式
oiu1010110的博客
11-17 970
下面是几种常见的水平垂直居中方式，可在不同情形下方便采用不同的方式 html 共同的css div,body{ padding: 0; margin: 0; } body{ background-color: darkgrey; } 1.最简单的margin:auto水平居中         .box{
css居中样式
Mayunling_的博客
02-07 1233
实现居中的方式
css和js实现弹出登录居中界面完整代码
10-18
主要介绍了css和js实现弹出登录居中界面，非常不错，具有参考借鉴价值,需要的朋友可以参考下
css的几种居中样式
Mayonnaise_Sann的博客
10-27 3158
css的几种居中样式 一、水平居中 /*块级元素*/ /*1-外边距*/ { margin: 0 auto; } /*2-定位*/ { display: absolute; left:50%; transform:translateX(-50%); } 设置了宽度，可以margin负值 + transform:translateX(-50%)实现; /*行内元素*/ /*1-对齐 给父级元素添加*/ { text-align: center; } 二、垂直
div+css在屏幕居中布局
caoyuan10036的专栏
07-12 5951
无标题文档 .juzhong{ position:absolute; top:50%; left:50%; margin-left:-150px; margin-top:-100px; width:300px; height:200px; background-color:orange; } Login 这样就居中了..可以做登录呀...遮罩层呀神马乱七八糟的都行.
WEB前端CSS居中的几种方法共4页.pdf.zip
10-30
以下将详细讲解几种常用且有效的CSS居中方法。 1. **水平居中** - **Text-align属性**：适用于内联元素或块级元素容器。设置`text-align: center;`可以使容器内的文本和内联元素水平居中。 ```css .container...
CSS3 不定高宽垂直水平居中的几种方式
01-19
这种方式兼容性不好 2、position + transform .son { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } IE9以下不支持transform属性 3、table + table-cell .father { ...
CSS水平垂直居中的几种方法总结
09-24
主要介绍了CSS水平垂直居中的几种方法总结,垂直居中是布局中十分常见的效果之一,本文介绍了几种方法，有兴趣的可以了解一下。
css 垂直居中的几种实现方法
12-13
今天重新整理一下思路，说说前端在实现页面元素垂直居中的几种思路： 一、利用 position 和负边距 利用绝对定位，让元素的顶部与居中线对齐，再让元素上移 50% 的高度。这个应该不难理解。原理可以用下图来做一个...
CSS 实现垂直居中的几种方法(必看)
12-13
说到居中，很多人第一反应应该是水平居中，说到水平居中，肯定道友们有一万种方法做到，CSS3 的FlexBox更是强大到没朋友。但是良辰今天想聊的是 CSS 垂直居中的方法，下面是萌萌的分割线。神马？你敢说不萌？ •方式...
Android布局居中的几种做法
09-01
主要介绍了Android布局居中的几种做法的相关资料,需要的朋友可以参考下
代码实现控件水平居中
05-18
简单代码实现控件水平居中，里面有详细备注说明
盘点8种CSS实现垂直居中水平居中的绝对定位居中技术
923723914
09-11 4327
Ⅰ.绝对定位居中(Absolute Centering)技术 我们经常用margin:0 auto来实现水平居中，而一直认为margin:auto不能实现垂直居中……实际上，实现垂直居中仅需要声明元素高度和下面的CSS: .Absolute-Center { margin: auto; position: absolute; top: 0; left: 0; botto...
css——居中对齐方法
肖的博客
08-14 1万+
1、text-align:center 仅对文字、图片、按钮等行内元素有效（display设置为inline或inline-block等）进行水平居中 2、margin：垂直 auto； 仅水平居中，且对浮动元素定位无效 .father{ width:500px; height:200px; background-colo...
css八种元素居中的几种方法
qq_39691394的博客
12-19 1581
css元素居中方法 01 css居中第一种方法 01 父元素定位设置position,并且知道父子元素的尺寸大小 .fathher { position: position; width: 100px; height: 100px; } .child { position: absolute; width: 50px; height: 50px; left: 0; top: 0; bottom: 0; right: 0; margin: auto } <div class="fa
CSS设置居中的方案总结-超全
大前端
07-29 347
块级元素居中 html代码部分 <div class="parent"> <div class="child">child</div> </div> 行内元素居中 html代码部分 <div class="parent"> <span class="child">child</span> </...
前端面试经典问题:CSS中居中的几种方式
weixin_40093850的博客
11-15 1093
1.水平居中的margin:0 auto 关于这个，大家肯定不陌生，这个是用于块级元素上。   2.水平居中 text-align:center img的display:inline-block,类似的行内元素可以在父元素上添加效果让它进行水平居中   3.水平垂直居中（一）定位需要定位的元素的margin减去宽高的一半。 这种方法的局限性在于必须知道需要垂直居中的元素的宽高...
css居中显示
xllikestudy的博客
04-23 757
CSS Position（定位） position 属性指定了元素的定位类型，元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。 本文将介绍使用属性absolute 定位 代码`： <!DOCTYPE html> <html> <head> <meta char...
CSS 元素垂直居中的 6种方法
热门推荐
wolinxuebin的专栏
05-30 45万+
转自：http://blog.zhourunsheng.com/2012/03/css-%E5%85%83%E7%B4%A0%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD%E7%9A%84-6%E7%A7%8D%E6%96%B9%E6%B3%95/利用CSS进行元素的水平居中，比较简单，行级元素设置其父元素的text-align center，块级元素设置其本身的left
css水平、垂直居中有哪几种方式
最新发布
04-20
可以使用以下几种方式实现CSS水平、垂直居中： 1. 使用flexbox布局，将父元素设置为display: flex，并使用justify-content和align-items属性来让子元素水平、垂直居中。 2. 使用position: absolute和transform: ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值