css 水平居中的几种实现方式

言

设计是带有主观色彩的，同样网页设计中的 css 一样让人摸不头脑。网上列举的实现方式一大把，或许在这里你都看到过，但既然来到这里我希望这篇能让你看有所收获，毕竟这也是前端面试的基础。

实现方式

1、text-align 方式

text-align 是入门最常用的属性，根据字面意思是文本对齐用的。

只需在父级标签上设置即可，虽然内部的子元素不管是块级元素 or 非块级元素都可以使用，但需注意块级元素会占用整行的宽度，文本是在这个宽度中作水平居中。

代码举例

页面效果

2、定宽 margin auto 方式

这也是常见的水平居中方式，通过设置子元素的 margin 属性来控制距离父元素的距离。需要注意：子元素如果是块级元素，就最好设置宽度，不然就会占满于父元素，在通过 text-align 文本居中对齐就没有意义了。对于非块级元素必须要设置宽度。

代码举例

页面效果

3、flex 方式

通过设置浮动布局来实现居中，这是相对上两种方法某种程度上最简单的实现，因为在其基础上可以做更多布局的扩展，不用担心破坏布局。

如果你不了解 flex 布局，可以看下这个链接：

https://eminoda.github.io/2018/08/20/css-flex/

设置 justify-content 轻松搞定定位：

代码举例

页面效果

4、position + 浮动方式

现在这两种是比较有趣的定位方式，实际场景不建议使用，我是不愿意别人这样写，脑袋还要转个弯，来理解这样布局的计算方式。

如果元素是块级元素，通过 float 浮动属性，将它的宽度“抹去”。然后通过对于上级元素的相对定位通过错位修正的方式来居中。

让父元素的左侧从中间开始定位，子元素再根据自己的实际宽度往左偏移一半达到水平居中的目的。

代码举例

页面效果

5、position + transform 方式

思路同上，不同的是这次设置子元素为绝对定位，并距离左侧偏离一半，最后通过 transform 根据元素的实际宽度往左再偏移一半，达到居中效果。

代码举例

页面效果

总结

上面只列举了 5 种水平居中的实现方法，相信还要更多的方式。不过不管哪种方法，能在业务代码实践中最快速、最准确的运用才是最佳实践。

希望在读的各位能有所收获。

关于我

一名工作在一线的前端工程师，乐于实践，并分享前端开发经验。

关注【前端雨爸】，欢迎评论留言，愿与各位交流进步。

点击 ↙ 了解更多，了解更多前端开发技术文章。！

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

Html5-CSS之五大居中方式

你是不是也对元素居中的知识点很是模糊？是不是苦于找不到一个总结的通俗易懂的说明？是不是自己懒得去总结？恭喜你，搜到这篇博客！这是鄙人在前端的学习与实践中总结出的元素的五大居中方式，黏贴了代码并对代码做了解释，希望对迷茫的有所帮助！

下面的居中示例中，统一使用了同一个div作为父元素和p作为子元素

设置一个div,并且设置了div的宽高边框，div里面设置一个块元素p，设置了它的宽高和背景色

css居中方式1

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>五大居中1</title>
<style>
*{margin:0;}
div{width:200px;height:300px;border:2px solid #000;margin:200px auto;
text-align:center;font-size:0;
}
div p{width:100px;height:100px;background:#666;
display:inline-block;vertical-align:middle;
}
div:after{content:"";display:inline-block;height:100%;vertical-align:middle;}
</style>
</head>
<body>
<div>
	<p></p>
</div>
</body>
</html>

这里利用了伪元素让子元素p在div盒子里左右水平居中只需要在它的父元素div里加text-align:center;垂直方向居中需要在父元素后面加了一个伪元素，并使得样式为inline-block;height:100%;就是和父元素一样高，vertical-align:middle;垂直居中，也就是p元素相对与伪元素居中，由于伪元素和div一样高，所以相当于p元素在div里垂直居中。

css居中方式2

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>五大居中2</title>
<style>
*{margin:0;}
div{position:relative;width:300px;height:400px;border:1px solid #000;margin:100px auto;}
p{position:absolute;left:0;bottom:0;right:0;top:0;margin:auto;width:100px;height:100px;background:#f99;}
</style>
</head>
<body>
<div>
	<p></p>
</div>
</body>
</html>

这里利用了定位居中

子元素p设置position：absolute脱离文档流,默认以html作为父元素，所以我们给父元素div设置position:relative;使得p以div为父元素做位置的变动，left:0;tight:0;top:0;bottom:0;（只有设置了定位的元素才可以使用这种方式来移动），最后margin:auto;就会水平和垂直都居中。

css居中方式3

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>五大居中3</title>
<style>
*{margin:0;}
div{display:flex;justify-content:center;align-items:center;width:300px;height:400px;border:1px solid #000;margin:100px auto;}
p{width:100px;height:100px;background:#f99;}
</style>
</head>
<body>
<div>
	<p></p>
</div>
</body>
</html>

这里利用了弹性盒居中

父元素div设置成弹性盒样式，justify-content:center;主轴居中

align-items:center;垂直居中（而且这两个只能设置在父元素上，弹性盒知识）

css居中方式4

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>五大居中4</title>
<style>
*{margin:0;}
div{position:relative;width:300px;height:400px;border:1px solid #000;margin:100px auto;}
p{width:100px;height:100px;background:#f99;position:absolute;
left:50%;top:50%;margin:-50px 0 0 -50px;}
</style>
</head>
<body>
<div>
	<p></p>
</div>
</body>
</html>

利用定位线左上角居中，然后左移子元素宽度的一半，再上移子元素高度的一半。

css居中方式5

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>五大居中5</title>
<style>
*{margin:0;}
div{position:relative;width:300px;height:400px;border:1px solid #000;margin:100px auto;}
p{position:absolute;width:100px;height:100px;background:#f99;left:50%;top:50%;
	transform:translate(-50%,-50%);}
</style>
</head>
<body>
<div>
	<p></p>
</div>
</body>
</html>

利用动画移动属性transform

结语

相信看了上面的有关Html5、css的元素五大居中方式，你们就可以解决自己的小问题了，但是也要养成一个总结的好习惯。好记性不如烂笔头！以前留下来的话语总是有他的道理。Come on！

原文链接：https://blog.csdn.net/qq_38110274/article/details/102756968

今天的内容中，廊坊网站建设公司的技术人员将分享下网站导航水平居中设置的方法，其实办法有很多，以CSS代码为例，这种代码操作很方便，后期修改的时候也简单，以下是详细的实例操作。

方法一：使用display:inline-block控制

这个方法比较简单，是将容器转成display:inline-block行内块级元素，然后就可以直接用text-align:center使其达到水平居中效果。HTML代码中需要一个div来包围这个导航菜单。

方法二：使用position:relative解决

position:relative定位方法来让元素水平居中，一般来说小编推荐这方法，因为代码多了个div去包住，当然这些是根据情况来使用的。将定位div设为浮动，再定位left:50%,然后导航定位至left:-50%。

方法三：使用display:table解决

HTML代码实例

</ul>

CSS代码实例

.navbar {

display:table;

margin:0 auto;

}

.navbar li {

display:table-cell;

}

.navbar li + li {

padding-left:20px;

}

方法四：使用display:inline-flex解决

HTML代码实例操作

<ul>

</ul>

</div>

CSS代码代码编写

.navbar {

text-align:center;

}

.navbar > ul {

display:-webkit-inline-box;

display:-moz-inline-box;

display:-ms-inline-flexbox;

display:-webkit-inline-flex;

display:inline-flex;

}

.navbar li + li {

margin-left:20px;

}

提示：浏览器兼容问题，目前这个代码不支持IE7及以下版本的IE浏览器。

其实这些方法很好的解决了网站导航菜单居中的问题，使用CSS编写有助于后期的修改，极大的方便了我们的操作和节省了宝贵的时间。在以后的内容中，小编还将会继续为朋友们分享更多更有价值的知识。

原创文章出自畅想网络，转载地址：http://www.e-wkj.cn/xw/2316.html

在线咨询

上一篇：Fabric.js 右键菜单 - 掘金
下一篇：程序员大神整理的好用工具

您的项目需求

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

整合营销服务商

css 水平居中的几种实现方式

言

实现方式

总结

关于我

您的项目需求