CSS是一种常用的网页样式语言,可以通过设置CSS属性来控制页面的样式。在CSS中,让一个DIV里的DIV居中是一项常见的任务。下面我们来学习如何实现这一功能。// HTML代码 <di
CSS是一种常用的网页样式语言,可以通过设置CSS属性来控制页面的样式。在CSS中,让一个DIV里的DIV居中是一项常见的任务。下面我们来学习如何实现这一功能。
// HTML代码 <div class="container"> <div class="box">我是居中的div</div> </div> // CSS代码 .container { display: flex; justify-content: center; align-items: center; } .box { width: 200px; height: 100px; background-color: #ccc; }
代码中,我们给外层DIV容器设置了display: flex;,这使得里面的子元素可以实现水平垂直居中。然后我们又分别给display: flex;容器设置了justify-content: center;和align-items: center;,这使得子元素在水平和垂直方向上都居中了。
在这个例子中,我们设置了.box子元素的宽度为200px,高度为100px,背景颜色为#ccc。我们可以根据需要任意更改这些CSS属性。
总结:使用CSS让DIV里的DIV居中是一项常见任务,在CSS中可以利用flex布局来实现这一功能,具体实现方法是给父容器设置display: flex;以及justify-content: center;和align-items: center;属性。
粉丝
0
关注
0
收藏
0