然后我们在html的编辑窗口，编辑元素，使其中显示若干文字，我是用的div标签进行布局显示的。
其在浏览器中的显示效果如下图所示，我们可以很清晰的看到，文字明显的靠上靠左对齐。
接下来我们就需要为文字元素添加一定的对齐方式，首先我们让其居中对齐，即使用text-align:center
使用之后在浏览器中进行效果查看，可以很清楚的看到，文字相对于之前靠右对齐了。
我们可以从上一个图中看到，文字在垂直方向上还是不对齐的，接下来我们就需要为文字添加垂直对齐样式，line-height，我们需要将这一样式的大小设为文字外层元素的高度大小，这样便可正好垂直居中对齐了。
接下来我们刷新浏览器中的页面，查看效果，现在的文字已是垂直水平均居中的状态。
需要准备的材料分别有：电脑、浏览器、html编辑器。
1、首先，打开html编辑器，新建html文件，例如：index.html。
2、在index.html中的<body>标签中，输入html代码：<div style="float: left">123</div><div>456</div>。
3、浏览器运行index.html页面，此时多个div会水平居中在一行。
水平居中：
行内元素：可以父级利用text-align: center进行水平居中
块级元素：
①可以利用margin: 0 auto进行水平居中
②使用position决定定位
利用margin-left进行左偏移
利用transform进行左偏移
③使用flex布局
垂直居中：
内联元素：可以使用line-height进行垂直居中
块级元素：
①使用position定位
利用margin-top进行上偏移
利用transform进行上偏移
②使用flex布局
常用的基本就这些，当然还有grid布局，父级设置为table布局，进行设置等方案，这边不做过多赘述。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）