html字体居中(html如何让文字上下居中)[通俗易懂]

大家好，我是讯享网，大家多多关注。

我是一个从事开发多年的老web前端程序员。目前辞职做自己的web前端私人定制课程。今年年初，我花了一个月的时间整理了一个最适合2019年的干货web前端学习产品。各种框架整理出来发给每一个前端朋友。想要获取，可以关注我的头条号，后台私信我:前端，免费获取。

Html5-CSS的五种居中方式

你是不是也对元素中心这个知识点很模糊？你在努力寻找一个简单易懂的总结解释吗？是不是懒得总结？恭喜你，你找到了这个博客！这是我前端学习和实践总结出来的五种元素定心方式。我粘贴了代码并解释了一下，希望对有困惑的人有所帮助！

在下面居中的示例中，相同的div用作父元素，p用作子元素。

设置一个div，并设置div的宽度和高度边框。在div中设置一个block元素P，并设置其宽度、高度和背景色。

Css居中模式1

& lt！doctype html & gt& lthtml & gt& lthead & gt& ltmeta charset=”utf-8 ” >& lttitle & gt大中心1

Css居中模式2

& lt！doctype html & gt& lthtml & gt& lthead & gt& ltmeta charset=”utf-8 ” >& lttitle & gt大中心2

子元素P从文档流中设置position:absolute，html默认为父元素，所以我们为父元素div设置position:relative；p使div作为父元素改变位置，左:0；紧:0；top:0；底部:0；(只有设置了定位的元素才能这样移动)，最后margin:auto；它将水平和垂直居中。

Css居中模式3

& lt！doctype html & gt& lthtml & gt& lthead & gt& ltmeta charset=”utf-8 ” >& lttitle & gt大中心3

父div设置为弹性框样式，justify-content:center；定心轴

对齐-项目:居中；垂直居中(而这两个只能在父元素上设置，知识弹性框)

Css居中模式4

& lt！doctype html & gt& lthtml & gt& lthead & gt& ltmeta charset=”utf-8 ” >& lttitle & gt大中锋4

Css居中模式5

& lt！doctype html & gt& lthtml & gt& lthead & gt& ltmeta charset=”utf-8 ” >& lttitle & gt大中心5

标签

相信通过阅读以上五种Html5和css的元素居中方式，你可以解决自己的小问题，但也要养成总结的好习惯。好的记忆胜过糟糕的写作！之前留下的话总有他的道理。加油！

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