块级元素 div水平居中垂直居中

最新推荐文章于 2023-05-25 14:38:05 发布

如花菇凉

最新推荐文章于 2023-05-25 14:38:05 发布

阅读量499

点赞数

分类专栏： VUE 前端文章标签： css3 css html

本文链接：https://blog.csdn.net/u012174809/article/details/122633973

版权

前端同时被 2 个专栏收录

179 篇文章 4 订阅

订阅专栏

VUE

146 篇文章 5 订阅

订阅专栏

水平居中

margin:0 auto;

解读

上面的代码值设置了两个值，那么第一个值就是元素的上下边距，第二个值就是左右边距。当元素的定义了width属性时，auto能实现水平居中的效果。这是固定写法。

垂直居中(小编之弱点)

例一

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
</script>
<style>
      .wrapper{
            width: 300px;
            height: 300px;
            background-color: pink;
		    text-align:center;
        }

        .box{
            width: 100px;
            height: 100px;
            background-color: deepskyblue;
            vertical-align: middle;
		    display: inline-block;
        }
	 .boxhelp{
        width: 0px;
        height: 100%;
        display: inline-block;
        vertical-align: middle;
        }
</style>
</head>
<body>
<div class="wrapper">
    <div class="box"></div>
	<div class="boxhelp"></div>
</div>
</body>
</html>

分析:

display:inline-block;//结合了inline与block的一些特点,就是不独占一行的块级元素.,所以父块级元素可以使用:行级元素的居中样式:text-align:center.

如果要居中的块级元素只有一个，需做一个辅助div，设置100%的高度并 vertical-align: middle;这样就可以达到垂直居中的效果。

例二

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
</script>
<style>
#parent {height: 250px;background-color:pink}

#child {
    height: 100px;
	line-height:250px;
}
</style>
</head>
<body>
<div id="parent">
<div id="floater"></div>
<div id="child">Content here</div>
</div>
</body>
</html>

解说:

记住垂直居中，我们的万能王:lighe-height.

对此属性不熟悉的可见。

CSS line-height 属性

如花菇凉

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
块级元素 div水平居中垂直居中

水平居中margin:0 auto;解读上面的代码值设置了两个值，那么第一个值就是元素的上下边距，第二个值就是左右边距。当元素的定义了width属性时，auto能实现水平居中的效果。这是固定写法。垂直居中(小编之弱点)例一<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><script></script
复制链接

扫一扫