CSS设置元素水平居中、垂直居中方式汇总

按照水平居中、垂直居中、行内元素、块级元素等条件进行组合获取效果

水平居中：行内元素解决方案

只需要把行内元素包裹在一个属性display为block的父层元素中，并且把父层元素添加如下属性即可：

.parent {text-align:center;
}

水平居中：块状元素解决方案

.item {/* 这里可以设置顶端外边距 */margin: 10px auto;
}

水平居中：多个块状元素解决方案

将元素的display属性设置为inline-block，并且把父元素的text-align属性设置为center即可:

.parent {text-align:center;
}

水平居中：多个块状元素解决方案 (使用flexbox布局实现)

使用flexbox布局，只需要把待处理的块状元素的父元素添加属性display:flex及justify-content:center即可:

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

垂直居中：单行的行内元素解决方案

.parent {background: #222;height: 200px;
}/* 以下代码中，将a元素的height和line-height设置的和父元素一样高度即可实现垂直居中 */
a {height: 200px;line-height:200px; color: #FFF;
}

垂直居中：多行的行内元素解决方案

组合使用display:table-cell和vertical-align:middle属性来定义需要居中的元素的父容器元素生成效果，如下：

.parent {background: #222;width: 300px;height: 300px;/* 以下属性垂直居中 */display: table-cell;vertical-align:middle;
}

垂直居中：已知高度的块状元素解决方案

.item{top: 50%;margin-top: -50px;  /* margin-top值为自身高度的一半 */position: absolute;padding:0;
}

垂直居中：未知高度的块状元素解决方案

.item{top: 50%;position: absolute;transform: translateY(-50%);  /* 使用css3的transform来实现 */
}

水平垂直居中：已知高度和宽度的元素解决方案1
这是一种不常见的居中方法，可自适应，比方案2更智能，如下：

.item{position: absolute;margin:auto;left:0;top:0;right:0;bottom:0;
}

水平垂直居中：已知高度和宽度的元素解决方案2

.item{position: absolute;top: 50%;left: 50%;margin-top: -75px;  /* 设置margin-left / margin-top 为自身高度的一半 */margin-left: -75px;
}

水平垂直居中：未知高度和宽度元素解决方案

.item{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);  /* 使用css3的transform来实现 */
}

水平垂直居中：使用flex布局实现

.parent{display: flex;justify-content:center;align-items: center;/* 注意这里需要设置高度来查看垂直居中效果 */background: #AAA;height: 300px;
}

CSS设置元素水平居中、垂直居中方式汇总相关推荐

伪元素在父元素中居中_web前端Html5开发CSS之元素五大居中方式，实用又简单！...
大家是不是对元素居中的知识点很是模糊?是不是苦于找不到一个总结的通俗易懂的说明?是不是自己懒得去总结?今天小编在前端的学习与实践中总结出的元素的五大居中方式,黏贴了代码并对代码做了解释,希望对迷茫的有 ...
html行内元素水平居中显示,CSS实现元素水平居中
CSS实现元素水平居中元素主要分为块级元素和行内元素,所以对元素进行水平居中也分这两种情况来讨论,另外块级元素的实现比较复杂,将分情况讨论. 一.行内元素常用行内元素为a/img/input/sp ...
css设置div水平居中方法
CSS设置div水平居中的方法: 1.给div元素设置"margin: 0 auto"样式: 2.在父级div元素里设置"text-align: center" ...
CSS设置元素叠加显示
CSS设置元素叠加显示的方式: 方法1:设置负margin: 给元素设置负margin使其移动后原来的位置是不会保留的负margin可以让元素的占用空间变小后面的元素可以覆盖当前的元素 (这里有 ...
css设置元素的宽高为整数，为什么有的浏览器解析出来的宽高是小数？
如图: 因为把当前的标签页缩放显示了,所以浏览器会渲染出非整数的盒子尺寸参考文章:css设置元素的宽高为整数,为什么有的浏览器解析出来的宽高是小数? - 孙北吉的回答 - 知乎
css实现元素水平垂直居中——6种方式
实现元素水平垂直居中的方式: 利用定位+margin:auto 利用定位+margin:负值利用定位+transform table布局 flex布局 grid布局利用定位+margin:auto ...
CSS初入门：设置子元素水平居中的方式
问题描述: 用几种方式实现元素位于父元素的水平居中位置,如图: 解决方式一通过控制子元素的左边框和右边框来达到居中的效果. 在那之前,我先举个我遇到过的错误示范 <!DOCTYPE html ...
关于css设置元素垂直水平居中的问题
第一种: 利用定位属性实现,但需要知道元素的宽高 <div class="box"></div><style>.box{weight:200px ...
CSS实现元素水平垂直居中的各种方法
关于 CSS 如何将元素进行水平垂直居中的几种常用方法前言在设计网页页面的过程中,总会有将元素或者文字进行水平或者垂直居中的要求,各种CSS样式调整,搞的头都大了.这里将会介绍 CSS 中几种常用 ...

CSS设置元素水平居中、垂直居中方式汇总

CSS设置元素水平居中、垂直居中方式汇总相关推荐

最新文章

热门文章