span 居中_H5元素的水平垂直居中布局总结

1，块级元素设置height和line-height或者text-align: center，可以让块级元素包裹的内联元素或者自身文本内容垂直居中或者水平居中；但是对包裹的块级元素和浮动元素不起作用。

2，块级元素包裹块级元素，设置被包裹元素margin: 0 auto达到水平居中，但是设置父元素的height和line-height或者子元素的vertical-align: middle不起作用，因为vertical-align: middle只对行内元素有效。总结设置子元素垂直居中有以下几种方法：

2.1，设置块级子元素display: inline-block

<div class="btn-container"><div class="btn-content"></div>
</div>.btn-container {width: 100%;height: 40px;background-color: red;line-height : 40px;text-align: center;font-size: 0px;
}.btn-content {display: inline-block;width: 100px;height: 30px;vertical-align: middle;background-color: green;
}

注意一定要设置父元素font-size: 0px。这是因为vertical-align: middle默认是和父元素的基线居中对齐，父元素的基线可以假想为字母x的底边，只有设置父元素font-size: 0px，才能将父元素的基线调整到中间，达到子元素在父元素中垂直居中的目的。

设置之前：

设置之后：

2.2，父块级元素包裹两个属性值为display: inline-block的子元素，并且有一个子元素的高度为100%，并且两个子元素都设置vertical-align: middle，达到另一个子元素垂直居中：

<div class="btn-container"><span class="btn-text">客户端</span><div class="btn-content"></div>
</div>.btn-container {width: 300px;height: 40px;background-color: red;
}.btn-text {display: inline-block;height: 100%;vertical-align: middle;background-color: green;
}.btn-content {display: inline-block;width: 100px;height: 30px;background-color: yellow;vertical-align: middle;
}

渲染结果如下图所示：

注：该情况也适用于子元素为一张图片加一个块级元素的情况

2.3，设置父元素的padding-top为(父元素高度-子元素高度)/2

.btn-container {width: 300px;height: 40px;background-color: red;padding-top: 5px;
}.btn-content {width: 100px;height: 30px;background-color: green;
}

那是否可以设置子元素的margin-top来达到同样的效果呢，也可以，但是有风险。根据规范，一个盒子如果没有上补白(padding-top)和上边框(border-top)，那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠。说白点就是，父元素的第一个子元素的上边距margin-top如果碰不到有效的border或者padding，就会不断一层一层向上找，把自己的margin当父元素的margin执行。

2.4，设置子元素为绝对定位，有以下3种方法可以实现水平和垂直居中：

.btn-container {position: relative;width: 300px;height: 40px;background-color: red;
}
//第一种方法
.btn-content {position: absolute;left: 0; top: 0; right: 0; bottom: 0;margin: auto;width: 100px;height: 30px;background-color: green;
}
//第二种方法
.btn-content {position: absolute;left: 50%;top: 50%;margin-top: -15px;margin-left: -50px;width: 100px;height: 30px;background-color: green;
}
//第三种方法
.btn-content {position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);width: 100px;height: 30px;background-color: green;
}

第二种方法必须知道子元素宽度和高度；如果不设置子元素尺寸，第一种方法子元素尺寸会和父元素一致，第三种方法会和子元素中包裹的内容一致；

2.5，使用flex弹性布局，弹性容器的每个子元素都变成一个弹性元素，而且是以相同方式布局的。不管是段落还是span元素，都变成弹性元素。

以2.2节为例:

.btn-container {width: 300px;height: 40px;background-color: red;display: flex;align-items: center;
}.btn-text {height: 100%;background-color: green;
}.btn-content {width: 100px;height: 30px;background-color: yellow;
}

可以看到弹性布局简单很多，所以h5布局中能用弹性布局的地方我们都应该尽量用弹性布局，在界面适配方面弹性布局也有一定的优势。

span 居中_H5元素的水平垂直居中布局总结相关推荐

html 定位元素怎么居中,绝对定位元素的水平垂直居中的方法（3种任选）
1.css实现居中缺点:需要提前知道元素的宽度和高度. Document .box{ width: 600px; height: 400px; position: absolute; left: 5 ...
HTML+CSS之设置元素的水平垂直居中
本文主要介绍如何利用HTML和CSS实现元素的水平垂直居中. 1.弹性布局(不换行) justify-content:center:水平居中 align-items:center:垂直居中 .fath ...
CSS文字或元素的水平垂直居中多种方式（简单明了）
前言:水平居中,我们可以很容易想到使用text-align实现文字水平居中,使用margin:0px auto;可以实现元素水平居中:所以重点将是怎么实现文字和元素的垂直居中?? --- 本文将通过举 ...
HTML元素的水平/垂直居中方式（简单代码和图）
1.水平居中text-align:center; 在没有浮动的情况下,我们可以让需要居中的块级元素设为inline/inline-block,然后在其父元素上添加text-aline:center;即 ...
未知宽高元素的水平垂直居中
大致有4种方法实现: 一.table布局(display:table) 二.绝对布局(position:absolute)+translate 三.转化 ...
CSS水平垂直居中布局方案概述
在前端开发中,通过CSS实现布局容器的居中,也有诸多方法方式,当然也是CSS面试题中的经典面试题,在本文章中会系统的分析综述通过 Flexbox 布局模块与 CSS Grid布局模实现容器的居中 ...
vue垂直布局_CSS水平垂直居中布局方案概述
在前端开发中,通过CSS实现布局容器的居中,也有诸多方法方式,当然也是CSS面试题中的经典面试题,在本文章中会系统的分析综述通过 Flexbox 布局模块与 CSS Grid布局模实现容器的居中 ...
margin:auto实现绝对定位元素的水平垂直居中
1.绝对定位元素的居中实现的一般方法兼容性不错的主流用法是: 但,这种方法有一个很明显的不足,就是需要提前知道元素的尺寸.否则margin负值的调整无法精确.此时,往往要借助JS获得. CSS3的兴 ...
元素的水平垂直居中解决方法
有时候为了使页面元素看起来更美观,常常会让元素水平居中,垂直居中.下面总结了几个常用的方法. 首先HTML结构如下: 1 <div class="out"> 2 < ...
CSS实现子元素div水平垂直居中
div基本布局 <div class="main"><div class="center"></div>

span 居中_H5元素的水平垂直居中布局总结

span 居中_H5元素的水平垂直居中布局总结相关推荐

最新文章

热门文章