您的位置 首页 网站建设

收集的一些 CSS 居中布局方法,送给大前端的你

今天服务器租用网为学习大前端的小伙伴们收集了一些CSS居中布局的方法,另外还收集了一些使用CSS实现的效果动图…

今天服务器租用网为学习大前端的小伙伴们收集了一些CSS居中布局的方法,另外还收集了一些使用CSS实现的效果动图,CSS一直以来对于主机吧小编来说都很神秘,小编一直以来都想好好学学CSS跟JS,但是由于没有好的学习方法,一直以来都没能好好学学,所以收集了这些CSS知识,以便以后用得到的时候拿来使用。

水平居中元素

通用方法,元素的宽高未知

方式一:CSS3 transform

.parent {
 position: relative;
}
.child {
 position: absolute;
 left: 50%;
 transform: translateX(-50%);
}

方式二:Flex 布局

.parent {
 display: flex;
 justify-content: center;
}

适用于子元素为浮动,绝对定位,内联元素,均可水平居中

居中的元素为常规文档流中的内联元素(display: inline)

常见的内联元素有:span, a, img, input, label 等等

.parent {
 text-align: center;
}

此方法同样适用于 display: inline-block 的元素。

居中的元素为常规文档流中的块元素(display: block)

常见的块元素:div, h1~h6, table, p, ul, li 等等

方式一:设置 margin

.parent {
 width: 100%;
}
.child {
 width: 600px;
 height: 50px;
 margin: 0 auto;
 background: #999;
}

此方法只能进行水平的居中,且对浮动元素或绝对定位元素无效。

方式二:修改为 inline-block 属性

.parent {
 text-align: center;
}
.child {
 display: inline-block;
}

居中的元素为浮动元素

.child {
 width: 100px;
 float: left;
 position: relative;
 left: 50%;
 margin-left: -50px;
}

居中的元素为绝对定位元素

方式一:

.parent {
 position: relative;
}
.child {
 position: absolute;
 width: 100px;
 left: 50%;
 margin-left: -50px;
}

方式二:

.parent {
 position: relative;
}
.child {
 position: absolute;
 width: 100px;
 left: 0;
 right: 0;
 margin: 0 auto;
}

垂直居中元素

通用方法,元素的宽高未知

方式一:CSS3 transform

.parent {
 position: relative;
}
.child {
 position: absolute;
 top: 50%;
 transform: translateY(-50%);
}

方式二:Flex 布局

.parent {
 display: flex;
 align-items: center;
}

适用于子元素为浮动,绝对定位,内联元素,均可垂直居中。

居中元素为单行文本

.text {
 line-height: 200px;
 height: 200px;
}

把文字的 line-height 设为文字父容器的高度,适用于只有一行文字的情况。

已知元素宽高

方式一:

.parent {
 position: relative;
}
.child{
 position: absolute;
 top: 50%;
 height: 100px;
 margin-top: -50px;
}

方式二:

.parent {
 position: relative;
}
.child{
 position: absolute;
 top: 0;
 bottom: 0;
 height: 100px;
 margin: auto 0;
}

绝对居中定位

div {
 width: 100px;
 height: 100px;
 margin: auto;
 position: fixed;
 //absolute is ok
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
}

优点:

不仅可以实现在正中间,还可以在正左方,正右方

元素的宽高支持百分比 % 属性值和 min-/max- 属性

可以封装为一个公共类,可做弹出层

浏览器支持性好

负边距居中

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

特点:

  1. 良好的跨浏览器特性,兼容 IE6 – IE7
  2. 灵活性差,不能自适应,宽高不支持百分比尺寸和 min-/max- 属性

Transform 定位

.child {
 width: 100px;
 height: 100px;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%); 
}

特点:

  1. 内容可自适应,可以封装为一个公共类,可做弹出层
  2. 可能干扰其他 transform 效果

Flexbox 布局

.parent {
 display: flex;
 justify-content: center;
 align-items: center;
}

这是 CSS 布局未来的趋势。Flexbox 是 CSS3 新增属性,设计初衷是为了解决像垂直居中这样的常见布局问题。

table-cell 居中

.parent {
 display: table-cell;
 vertical-align: middle;
 text-align: center;
 width: 200px;
 height: 200px;
 border: 1px solid red;
}
.child {
 width: 100px;
 height: 100px;
 display: inline-block;
 background-color: #03f;
}

适用于子元素 display 为 inline-block, inline 类型的元素,需要已知父元素的宽高,且父元素的宽高不能设为百分比数。

font-size 配合 vertical-align 实现垂直居中

.parent {
 font-size: 175.4px;
 height: 200px;
 text-align: center;
}
.child {
 vertical-align: middle;
 display: inline-block;
 font-size: 12px;
 width: 50px;
 height: 50px;
 background-color: #00f;
}

该方法的要点是给父元素设一个合适的 font-size 的值,这个值的取值为该父元素的高度除以 1.14 得到的值,并且子元素必须 是一个 inline 或 inline-block 元素,需要加上 vertical-align: middle 属性。使用这种方法,子元素的宽度或高度都不必知道。

文本内容居中

text {
 height: 100px;
 line-height: 100px;
 text-align: center;
}

CSS效果:

服务器租用网(主机吧)所有文章非注明转载的均为站长原创,转载请注明出处:https://www.fuwuqizuyong.cc/2198.html
服务器租用

作者: 服务器租用

服务器租用专注为广大站长与网友朋友分享建站教程、SEO优化文章、网站模板资源、服务器软件(Web环境、建站程序)等,另外为大家推荐各种国内外服务器、香港服务器、虚拟主机、域名购买优惠信息与服务器相关知识。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

联系我们

联系我们

18033782514

在线咨询: QQ交谈

邮箱: 564999054@qq.com

工作时间:周一至周五,9:00-17:30,节假日休息

关注微信
微信扫一扫关注我们

微信扫一扫关注我们

关注微博
返回顶部