元素的水平居中和垂直居中

最新推荐文章于 2022-06-01 00:00:36 发布

小北0517

最新推荐文章于 2022-06-01 00:00:36 发布

阅读量95

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_69043473/article/details/125057983

版权

1.水平居中

a.行内元素，如文本居中，div中的图片居中

text-align: center;

b.块级元素

//定宽：可以采取绝对定位的方式实现
 .center {
    width: 960px;
    position: absolute;
    left: 50%;
    //左外边距的 负宽度一半的距离
    margin-left: -480px;
 }
 
 //定宽，不定宽都可以：借助css3的变形属性Transform来完成
  .content {
 	 width:80%;
     position: absolute;
     left: 50%;
     //向左移动自身宽度的一半
     transform: translateX(-50%);
 }

2.垂直居中

a.行文本的垂直居中

//元素的高度和行高相等时，文本呈现垂直居中  

 height== line-height  
 
  //高等于行高

b.多行文本的垂直居中

    //不固定高度的垂直居中
	//通过设置padding实现
	
    //固定高度的垂直居中

	//使用display设置为table-cell，配合样式vertical-align设置为middle来实现

	  table-cell：//以表格单元格的形式来解析代码

c.多行文本固定高度的垂直居中

使用display设置为table-cell，配合样式vertical-align设置为middle来实现 table-cell：以表格单元格的形式来解析代码

    <style>
        div{
            width: 400px;
            height: 500px;
            border: 2px solid #999;
            padding:20px 0px;
            display: table-cell;
            vertical-align: middle;
        }
    </style>
</head>

<body>
    <div>
        撑着油纸伞，独自彷徨在悠长，悠长又寂寥的雨巷，
        我希望逢着一个丁香一样的结着愁怨的姑娘。
        她是有丁香一样的颜色，丁香一样的芬芳，
    </div>
</body>

3.块级元素垂直居中

a.固定宽高的垂直居中

.content {
        width: 100px;
        height: 100px;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -50px;
        margin-top: -50px;
    }

b.不固定宽高的垂直居中

.content {
	   width: 30%; 
       height: 30%;
       position: absolute;
        left: 50%;
        top: 50%;
        /* 左/上边缘向左/上移动自身宽/高度的一半 */
        transform: translate(-50%, -50%);
    }

c.基于Flex实现垂直居中

.content {
         /*转为flex弹性盒布局*/
          display: flex;
        /*主轴上的对齐方式为居中*/
        justify-content: center;
        /*交叉轴上对齐方式为居中*/
         align-items: center;
    }

小北0517

关注

0
点赞
踩
0

收藏

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

1.水平居中a.行内元素，如文本居中，div中的图片居中text-align: center;b.块级元素//定宽：可以采取绝对定位的方式实现 .center { width: 960px; position: absolute; left: 50%; //左外边距的负宽度一半的距离 margin-left: -480px; } //定宽，不定宽都可以：借助css3的变形属性Transform来完成 .content { w.
复制链接

扫一扫