水平垂直居中小结

xuxueli 发布于2019-08-29 16:35 / 1378人阅读

摘要：相等的上下值三水平垂直居中绝对定位和负外边距使用绝对定位实现水平垂直居中时，元素的和应该等于对应的和值的一半再取负值。相对定位或绝对定位均可绝对定位和布局能实现居中效果的方法还有很多，这里列出来的方法只是一小部分，日后会慢慢补充。

我们在页面布局中经常会遇到需要将内容水平/垂直居中的情况，现在我们就来梳理一下实现的方法。

一、水平居中

1.行元素设置其父元素的text-align：center，适用于单行文本水平居中。
2.块元素设置其本身的左右margin为auto即可,适用于设置了一定宽高值的块元素。
3.使用flex

二、垂直居中

line-height

使行元素垂直居中，可以设置行元素的line-height值，适用于单行文本垂直居中。
若行元素所在的块级父元素有固定高度，则使行元素的line-height值与其父元素的高度相等；若行元素所在的父元素没有设置高度，则行元素设置的line-height值就是其父元素的高度。
若要居中一张图片，可以设置图片的vertical-align：middle; 图片的父元素设置line-height值。

2.table-cell

通过如下设置可以实现元素的垂直居中。
#parent {display: table;}//此元素会作为块级表格来显示（类似

），表格前后带有换行符。
#child {
display: table-cell;//此元素会作为一个表格单元格显示（类似

和	） vertical-align: middle; } 3.使用绝对定位和负外边距使用绝对定位实现垂直居中时，元素的margin-top应该等于对应的top值的一半再取负值。 #parent {position: relative;} #child { height: 30%; width: 50%; position: absolute; top: 50%; margin: -15% 0 0 0; } 4.相等的上下padding值 #parent { padding: 5% 0; } #child { padding: 10% 0; } 三、水平垂直居中 1.绝对定位和负外边距使用绝对定位实现水平垂直居中时，元素的margin-top和margin-left应该等于对应的top和left值的一半再取负值。 #parent {position: relative;} #child { position: absolute; top: 50%; left: 50%; height: 30%; width: 50%; margin: -15% 0 0 -25%; } 2.定位和transform transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。2D 转换方法，通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标）和 top（y 坐标）位置参数，默认以元素的中心点为基点，x,y如果为负就反方向移动。这种方法类似于上一种使用负边距。 #parent {position: relative;} #child { position: fixed;//相对定位或绝对定位均可 width:500px; height:300px; top: 50%; left: 50%; transform: translate(-50%, -50%); } 3.绝对定位和margin:auto #parent {position: relative;} #child { width: 50%; height: 30%; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; } 4.flex布局 div{ display: flex; justify-content:center; align-items:Center; } 能实现居中效果的方法还有很多，这里列出来的方法只是一小部分，日后会慢慢补充。参考文章1：https://www.cnblogs.com/hutuz... 参考文章2：https://blog.csdn.net/liufeif... 私有云服务器托管水平垂直居中垂直居中实现垂直居中文字垂直居中文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。转载请注明本文地址：https://www.ucloud.cn/yun/113842.html 上一篇：一个常年更新的CSS采坑合集下一篇：css还可以这么写？相关文章垂直水平居中方法小结摘要：前言最近看到很多面试题目会问请说出几种使用完成垂直水平居中的方法正好看基础的时候看到一篇文章是讲完全居中的，这边对于文章中的内容做个小结。具体代码如下使用完成垂直水平居中该方法的核心思想是使用表格来实现垂直居中，再使用来实现水平居中。前言：最近看到很多面试题目会问：请说出几种使用css完成垂直水平居中的方法？正好看css基础的时候看到一篇文章是讲完全居中的，这边对于文章中的内容做个小... amuqiao 2019-08-29 17:00 评论0 收藏0 垂直水平居中方法小结摘要：前言最近看到很多面试题目会问请说出几种使用完成垂直水平居中的方法正好看基础的时候看到一篇文章是讲完全居中的，这边对于文章中的内容做个小结。具体代码如下使用完成垂直水平居中该方法的核心思想是使用表格来实现垂直居中，再使用来实现水平居中。前言：最近看到很多面试题目会问：请说出几种使用css完成垂直水平居中的方法？正好看css基础的时候看到一篇文章是讲完全居中的，这边对于文章中的内容做个小... xcc3641 2019-08-02 11:44 评论0 收藏0 小结——居中问题的解决摘要：居中问题居中问题定位不管用水平居中需要做如下处理定位不管用，水平居中需要做如下处理定位管用水平居中需要做如下处理定位管用，水平居中需要做如下处理定位加元素已知宽度定位加元素已知宽度父元素设置为子元素设置为距上，据左，然后减去元素自居中问题： 1.Fixed定位margin：0 auto;不管用，水平居中需要做如下处理： position: fixed; top: 0; bottom: 0; ... darkbaby123 2019-04-23 11:56 评论0 收藏0 CSS学习笔记－元素水平垂直居中摘要：前言布局中经常会遇到元素水平居中的需求今天根据以前的学习笔记以及看过的一些技术博客做个元素水平居中的小结。文字的水平垂直居中文字水平居中文字的水平垂直居中在于同高然后。前言布局中经常会遇到元素水平居中的需求,今天根据以前的学习笔记?以及看过的一些技术博客做个元素水平居中的小结。正文图片的水平垂直居中 //图片地址为http://static.jsbin.com/ima... NeverSayNever 2019-08-28 18:28 评论0 收藏0 CSS 行内布局实践小结摘要：相关内联格式上下文主要影响内布局的行盒模型，这是一个显示区域，根据块状容器内，每一行的多个内联元素都会共同生成一个行盒模型。前言通常情况下，要使元素排列在一行内，通常做法就是使用float，然后再清浮动。如下：showImg(https://segmentfault.com/img/bVmVua); 但是如果要使其垂直居中，则必须手动调整，蓝色或者绿色块的位置，比较繁琐。 ... Taste 2019-08-28 18:13 评论0 收藏0 发表评论登陆后可评论 0条评论 xuxueli 男\|高级讲师我要关注我要私信 TA的文章阅读更多 tensorflow 阅读 1045·2023-04-25 23:22 tensorflow配置阅读 1434·2023-04-25 20:04 web前端和后端的区别在哪？阅读 2380·2021-11-22 15:24 Linux——Ubuntu使用个给力的镜像，安装软件速度飞快阅读 2557·2021-11-11 16:54 自己动手写一个侧导航栏组件阅读 1717·2019-08-30 14:03 水平垂直居中小结阅读 1379·2019-08-29 16:35 多享开发微商城有哪些步骤？阅读 1536·2019-08-26 10:29 前端解决第三方图片防盗链的办法 - html referrer 访问图片资源403问题阅读 2052·2019-08-23 18:01 最新活动阅读需要支付1元查看 UCloud （优刻得科技股份有限公司）是中立、安全的云计算服务平台，坚持中立，不涉足客户业务领域。公司自主研发IaaS、PaaS、大数据流通平台、AI服务平台等一系列云计算产品，并深入了解互联网、传统企业在不同场景下的业务需求，提供公有云、混合云、私有云、专有云在内的综合性行业解决方案。 UCloud与云服务公司介绍加入我们 UCan线上公开课行业解决方案产品动态友情链接 GPU算力平台 UCloud私有云 SurferCloud 工厂仿真软件 Pinex AI绘画社区栏目专栏文章专题地图常见问题安全中心新闻动态媒体动态客户案例公告扫扫了解更多 Copyright © 2012-2023 UCloud 优刻得科技股份有限公司｜沪公网安备 31011002000058号｜沪ICP备12020087号-3｜ <

和

）
vertical-align: middle;
}

3.使用绝对定位和负外边距

使用绝对定位实现垂直居中时，元素的margin-top应该等于对应的top值的一半再取负值。
#parent {position: relative;}
#child {
height: 30%;
width: 50%;
position: absolute;
top: 50%;
margin: -15% 0 0 0;
}

4.相等的上下padding值

#parent {
padding: 5% 0;
}
#child {
padding: 10% 0;
}

三、水平垂直居中

1.绝对定位和负外边距

使用绝对定位实现水平垂直居中时，元素的margin-top和margin-left应该等于对应的top和left值的一半再取负值。
#parent {position: relative;}
#child {
position: absolute;
top: 50%;
left: 50%;
height: 30%;
width: 50%;
margin: -15% 0 0 -25%;
}

2.定位和transform

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。2D 转换方法，通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标）和 top（y 坐标）位置参数，默认以元素的中心点为基点，x,y如果为负就反方向移动。这种方法类似于上一种使用负边距。
#parent {position: relative;}
#child {
position: fixed;//相对定位或绝对定位均可
width:500px;
height:300px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

3.绝对定位和margin:auto

#parent {position: relative;}
#child {
width: 50%;
height: 30%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}

4.flex布局
div{
display: flex;
justify-content:center;
align-items:Center;
}

能实现居中效果的方法还有很多，这里列出来的方法只是一小部分，日后会慢慢补充。

参考文章1：https://www.cnblogs.com/hutuz...
参考文章2：https://blog.csdn.net/liufeif...

私有云服务器托管水平垂直居中垂直居中实现垂直居中文字垂直居中

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113842.html

垂直水平居中方法小结

摘要：前言最近看到很多面试题目会问请说出几种使用完成垂直水平居中的方法正好看基础的时候看到一篇文章是讲完全居中的，这边对于文章中的内容做个小结。具体代码如下使用完成垂直水平居中该方法的核心思想是使用表格来实现垂直居中，再使用来实现水平居中。前言：最近看到很多面试题目会问：请说出几种使用css完成垂直水平居中的方法？正好看css基础的时候看到一篇文章是讲完全居中的，这边对于文章中的内容做个小...

amuqiao 2019-08-29 17:00 评论0 收藏0
垂直水平居中方法小结

摘要：前言最近看到很多面试题目会问请说出几种使用完成垂直水平居中的方法正好看基础的时候看到一篇文章是讲完全居中的，这边对于文章中的内容做个小结。具体代码如下使用完成垂直水平居中该方法的核心思想是使用表格来实现垂直居中，再使用来实现水平居中。前言：最近看到很多面试题目会问：请说出几种使用css完成垂直水平居中的方法？正好看css基础的时候看到一篇文章是讲完全居中的，这边对于文章中的内容做个小...

xcc3641 2019-08-02 11:44 评论0 收藏0
小结——居中问题的解决

摘要：居中问题居中问题定位不管用水平居中需要做如下处理定位不管用，水平居中需要做如下处理定位管用水平居中需要做如下处理定位管用，水平居中需要做如下处理定位加元素已知宽度定位加元素已知宽度父元素设置为子元素设置为距上，据左，然后减去元素自居中问题： 1.Fixed定位margin：0 auto;不管用，水平居中需要做如下处理： position: fixed; top: 0; bottom: 0; ...

darkbaby123 2019-04-23 11:56 评论0 收藏0
CSS学习笔记－元素水平垂直居中

摘要：前言布局中经常会遇到元素水平居中的需求今天根据以前的学习笔记以及看过的一些技术博客做个元素水平居中的小结。文字的水平垂直居中文字水平居中文字的水平垂直居中在于同高然后。前言布局中经常会遇到元素水平居中的需求,今天根据以前的学习笔记?以及看过的一些技术博客做个元素水平居中的小结。正文图片的水平垂直居中 //图片地址为http://static.jsbin.com/ima...

NeverSayNever 2019-08-28 18:28 评论0 收藏0
CSS 行内布局实践小结

摘要：相关内联格式上下文主要影响内布局的行盒模型，这是一个显示区域，根据块状容器内，每一行的多个内联元素都会共同生成一个行盒模型。前言通常情况下，要使元素排列在一行内，通常做法就是使用float，然后再清浮动。如下：showImg(https://segmentfault.com/img/bVmVua); 但是如果要使其垂直居中，则必须手动调整，蓝色或者绿色块的位置，比较繁琐。 ...

Taste 2019-08-28 18:13 评论0 收藏0