css中一个div在另一个div中垂直水平居中的方法

最新推荐文章于 2022-11-04 16:29:54 发布

李~妞思

最新推荐文章于 2022-11-04 16:29:54 发布

阅读量3.6k

点赞数 2

分类专栏：前端H5 文章标签： css 居中方法

本文链接：https://blog.csdn.net/LWD_XST/article/details/102230333

版权

css中一个div在另一个div中垂直水平居中的若干种方法

css中将元素居中的方法大致有定位居中、弹性盒居中、行内块结合vertical-align以及text-align等方法。

定位居中

定位居中，顾名思义需要用到 “position” 属性，给父盒子加上相对定位，子盒子加上绝对定位，具体实现请看下面代码。

弹性盒居中

弹性盒是css3中引入的一个新属性值flex,它是一种新的布局模式flexbox布局，即伸缩布局盒模型。用来提供一个更有效的方式制定、调整和分布一个容器里的项目布局，即使他们的大小是未知或者动态的。

行内块inline-block结合vertical-align以及text-align

行内块元素的特殊性可以使元素设置大小，并且具有文本属性。vertical-align调节垂直方向上的对齐方式，text-align调节水平方向上的对齐方式。

具体代码如下：

<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
		body{
			padding:0;
			margin:0;
		}
		.par{
			width:400px;
			height:400px;
			backgro

最低0.47元/天解锁文章

李~妞思

关注

2
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
css中一个div在另一个div中垂直水平居中的方法

css中一个div在另一个div中垂直水平居中的若干种方法css中将元素居中的方法大致有定位居中、弹性盒居中、行内块结合vertical-align以及text-align等方法。定位居中定位居中，顾名思义需要用到 “position” 属性，给父盒子加上相对定位，子盒子加上绝对定位，具体实现请看下面代码。弹性盒居中弹性盒是css3中引入的一个新属性值flex,它是一种新的布局模式...
复制链接

扫一扫