css实现水平居中和垂直居中的常见方式

Joyven 发布于2019-08-01 15:45 / 2770人阅读

摘要：我们在实际工作中常会遇到需要设置居中的场景，居中分为水平居中和垂直居中。针对不同的情况又有不同的实现方式，例如行内元素和块状元素。例子对于图片垂直居中可以利用的实现例子整个居中让为的居中实现代码以下不支持。

我们在实际工作中常会遇到需要设置居中的场景，居中分为水平居中和垂直居中。针对不同的情况又有不同的实现方式，例如行内元素和块状元素。

水平居中：

行内元素：text-align:center；//这个比较简单
块状元素：定宽的块状元素通过设置左右margin为auto实现，例如margin：10px auto；不定宽的块状元素：加入 table 标签后按照定宽元素进行设置；设置 display: inline 后按照行内元素设置；设置position:relative left:50% 通过给父元素设置 float，然后给父元素设置position:relative 和 left:50%，子元素设置 position:relative 和 left: -50% 来实现水平居中。

垂直居中：
例子1.
对于单行文本最简单的垂直居中就是利用line-height，首先，定义整个div的高度，然后再设置line height 的值等于div高度，这样就实现了单行文本的居中效果。
例子2.

对于图片垂直居中可以利用css的vertical-align:middle实现:

   #parent {
   line-height :200px;
   }
   #parent img{
   vertical-align:middle;
   }

例子3.
整个div 居中

   
   Content here

让id为child的div 居中实现代码：

   #parent{display:table;}
   #child {
   display:table-cell;
   vertical-align:middle;
   }
   //display:table-cell;IE8以下不支持。
   IE8以下的浏览器可以使用
   #child{
   display:inline-block;
   }

例子4.针对div块级元素，可以使用下面的方法实现垂直居中

   HTML:
   
   Content here
   
   
   css：
   #parent{
   position:relative;}
   #child {
   positon:absolute;
   top:50%;
   left:50%;
   height:30%;
   width:50%;
   margin:-15% 0 0 -25%;
   }

设置父级position为relative；子元素postion为absolute；同时设置子元素的top为50%，水平也想居中的话，就设置left为50%

超融合服务器私有云水平垂直居中实现垂直居中 html的水平居中垂直居中

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

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

css实现水平居中和垂直居中的常见方式

摘要：我们在实际工作中常会遇到需要设置居中的场景，居中分为水平居中和垂直居中。针对不同的情况又有不同的实现方式，例如行内元素和块状元素。例子对于图片垂直居中可以利用的实现例子整个居中让为的居中实现代码以下不支持。我们在实际工作中常会遇到需要设置居中的场景，居中分为水平居中和垂直居中。针对不同的情况又有不同的实现方式，例如行内元素和块状元素。水平居中：行内元素：text-align:...

hqman 2019-08-29 11:22 评论0 收藏0
前端-CSS3&H5

摘要：高度模型浅识为的简写，简称为块级格式化上下文，为浏览器渲染某一区域的机制，中只有和中还增加了和。并非所有的布局都会在开发中使用，但是其中也会涉及一些知识点。然而在不同的纯制作各种图形纯制作各种图形多图预警一劳永逸的搞定 flex 布局寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 float 属性不...

Hydrogen 2019-08-05 12:48 评论0 收藏0
前端-CSS3&H5

摘要：高度模型浅识为的简写，简称为块级格式化上下文，为浏览器渲染某一区域的机制，中只有和中还增加了和。并非所有的布局都会在开发中使用，但是其中也会涉及一些知识点。然而在不同的纯制作各种图形纯制作各种图形多图预警一劳永逸的搞定 flex 布局寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 float 属性不...

xiaolinbang 2019-08-29 14:14 评论0 收藏0
CSS水平居中和垂直居中的若干方法

摘要：居中分为水平居中和垂直居中，水平居中方式也较为常见和统一，垂直居中的方法就千奇百怪了。若把最后一行加上，即可同时实现水平和垂直居中。博客原文地址：Claiyre的个人博客 https://claiyre.github.io/如需转载，请在文章开头注明原文地址不为繁华易匠心从css入门就开始接触，无所不在的，一直备受争议的居中问题。css居中分为水平居中和垂直居中，水平居中方式也较为...

hiyayiji 2019-08-29 12:29 评论0 收藏0
css--布局

摘要：布局方式布局的传统解决方案，基于盒状模型，依赖属性属性属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。关于布局，当然肯定还有更多的更好的方法。接触前端开发也有半年了，每当需要将一个空白的纸，画成一个页面的时候，总会出现不知所措的几秒钟。除了因为对css中的各种属性的不熟练之外，更难为人的是怎么简练的将这些属性排列组合起来。其实静下心来，仔细想一想，无非就是整体-->局...

Nino 2019-08-30 12:43 评论0 收藏0