没错，css居中就是如此的简单！

pkwenda 发布于2019-08-29 16:44 / 2528人阅读

摘要：写在前面居中方案是一个老生常谈的问题，主要包括水平居中和垂直居中，水平居中大家用的比较多，最常用的莫过于方案了，而垂直居中，很多时候会让很多新手头疼。常用居中方案水平解决方案水平居中适用于已经知道宽度，并且其父级宽度不为的元素水平居中。

写在前面

css居中方案是一个老生常谈的问题，主要包括水平居中和垂直居中，水平居中大家用的比较多，最常用的莫过于margin:0 auto方案了，而垂直居中，很多时候会让很多新手头疼。

常用居中方案（水平）

margin：0 auto解决方案（水平居中）

适用于已经知道宽度，并且其父级宽度不为0的元素水平居中。



    哈哈哈哈

 

.parent {
    width:800px;
}
.child {
    width:20%;//也可以是固定像素
    margin:0 auto;
}

2.利用text-align:center使行内元素水平居中(水平居中)



   哈哈哈哈




div {
    text-align:center
}

3.flex水平居中



    哈哈哈哈



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

4.绝对定位利用负边距居中(已知宽度)



    哈哈哈哈



.parent {
    position:relative;
}
.child {
    width:500px;
    position: absolute;
}

5.绝对定位不知宽度居中，可以利用css transform属性，也可以利用flex居中



    哈哈哈哈



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

垂直居中方案

1.不知宽高，兼容性很高的居中方案。



    哈哈哈哈



.parent {
    position:relative;
}
.child {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

2.利用行高进行居中,行高和高度一致



    哈哈哈哈



.parent {
    height:50px;
    line-height:50px;
}

3.flex方案



    哈哈哈哈



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

4.transform方案



    哈哈哈哈



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

5.已知父级高度，利用margin-top进行居中，该方案过于简单，就不贴代码了
6.绝对定位，使用负边距居中



    哈哈哈哈



.parent {
    position: relative;
}
.child {
  position: absolute;
  width:500px;
  height:500px;
  top: 50%;
  left: 50%;
  margin-top:-250px;
  margin-left:-250px;
}

还有一种是利用table方案居中，我觉得这种方案可能过时了，想了解的话可以自己百度一下

写在最后

本文已经列出了大多情况下都可以解决的居中方案，还有一些比较居中，例如浮动元素居中可以参考绝对定位居中，如果不考虑兼容性的话，flex居中是最方便的方案，大家可以自由的去根据实际情况去选择需要的方案

超融合服务器私有云 html居中css 如此好用的云主机 css简单简单css

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

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

从头开始 — CSS — 垂直居中

摘要：基于特有的属性拥有内联元素的特性同时可以定义宽高，我们可以设置一个行内块用于定义高度，再让其他内联元素与其对齐，实现垂直居中。如果居中的元素超过了视窗会被裁剪掉。使用时，不仅在水平方向上将元素居中，垂直方向上也是如此。事实上，每次面试前端必问的问题就是这个。及其常见的需求，看起来似乎非常简单，但是实现起来很费劲，尤其是涉及尺寸不固定的元素。本篇文章将介绍比较流行的几种方法。行内块...

wuaiqiu 2019-08-30 14:13 评论0 收藏0
从头开始 — CSS — 垂直居中

摘要：基于特有的属性拥有内联元素的特性同时可以定义宽高，我们可以设置一个行内块用于定义高度，再让其他内联元素与其对齐，实现垂直居中。如果居中的元素超过了视窗会被裁剪掉。使用时，不仅在水平方向上将元素居中，垂直方向上也是如此。事实上，每次面试前端必问的问题就是这个。及其常见的需求，看起来似乎非常简单，但是实现起来很费劲，尤其是涉及尺寸不固定的元素。本篇文章将介绍比较流行的几种方法。行内块...

NoraXie 2019-08-01 18:43 评论0 收藏0
老生常谈之CSS的垂直居中

摘要：在通常情况下，对那些需要居中的元素来说，其尺寸往往是由其内容来决定的。虽然没有垂直居中效果，但也是完全可以接受的。的另一个好处在于，它还可以将匿名容器即没有被标签包裹的文本节点垂直居中。主要摘自：《CSS 揭秘》，强烈推荐的一本书。 44 年前我们就把人类送上月球了，但现在我们仍然无法在 CSS 中实现垂直居中。——James Anderson(https://twitter.co...

CompileYouth 2019-08-30 15:55 评论0 收藏0
python

Python装饰器为什么难理解？无论项目中还是面试都离不开装饰器话题，装饰器的强大在于它能够在不修改原有业务逻辑的情况下对代码进行扩展，权限校验、用户认证、日志记录、性能测试、事务处理、缓存等都是装饰器的绝佳应用场景，它能够最大程度地对代码进行复用。但为什么初学者对装饰器的理解如此困难，我认为本质上是对Py… Python 实现车牌定位及分割作者用 Python 实现车牌定位及分割的实践。 ...

chenatu 2019-07-30 15:35 评论0 收藏0
前端-CSS3&H5

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

Hydrogen 2019-08-05 12:48 评论0 收藏0