css实现元素的水平垂直居中。

(尝试采用5W2H方法说明):

别只看,请实操!!!

What:

1.这篇文档主要描述元素水平方向居中的几种最常见和最实用的几种方式,并说明优缺点。

2.写这篇文章的目的,是为了巩固自己的知识,也分享给大家一起学习研究,欢迎大家指正和评论。

Why:

需要水平居中的原因,就是为了让元素位于视觉中心突出重点,可视化布局的简介明了,主题明确,提高用户体验度。

When:

我是星期六下午开始编写,一直到晚上12点。

对于你自己,如果你感觉自己对这些掌握还不牢靠,请立刻!马上!Now!开始动手尝试起来,不然一开始就浇灭你的小火苗,让你丧失了激情和男人该有的冲动。

Where:

学习的场所可以是anywhere;咖啡厅、家里、饭店、火车上(我就是在高铁上码的文章),不必拘泥场所,只要不冷能动手就做起来。

Who:

针对人员比如像我这种遗忘型、刚入门的初学者、以及在css懵懂过程中徘徊的你,大神请绕路或留个脚印踩踩也行。

我,一个大老爷们,没啥好说的;你们,一群智商200+,给个支点就能撬动地球的你们,动动手指你们就全学会了。

How Long:

你要问我学懂这个大概多长时间,以大家高达200+赶超爱因斯坦的智商,说半天就能搞懂我都感觉是瞧不起大家,以各位看官的智商,半个小时,顶多半个小时,你就能掌握。

How:

请忽略以上的部分废话,以下的怎么做才是重点:

行内元素居中方式:

   <div style="height:50px;border:1px solid red;">
<label style="line-height:50px">单行文本label垂直居中:设置line-height为父级行高</label>
</div>

水平垂直居中方式

方式一:Flex布局 [推荐]

优点:内容块的高度任意,优雅的溢出。

缺点:IE8/IE9不支持,需要浏览器前缀,渲染可能会有问题。

    <div class="hv_flex">
<div style="width: 20px;">左</div>
<div class="hv_flexChild">flex布局垂直水平居中</div>
<div style="width: 20px;">右</div>
</div> .hv_flex {
display: flex;
width: 600px;
height: 100px;
border: 1px solid red;
justify-content: center;
align-content: center; /* 多行是垂直居中,垂直没有边距 */
align-items: stretch; /* stretch让盒子内的每个元素的高度都等于行高 */
}
.hv_flexChild {
flex: 1;
border: 2px solid green;
left: 10px;
right: 10px;
}

方式二:after伪元素实现水平垂直居中 [推荐]

优点:兼容所有游览器

<div class="parent">
<div class="son">after伪元素实现水平垂直居中</div>
</div> .parent {
border: 2px solid blue;
text-align: center;
height: 100px;
width: 600px;
/* overflow: hidden; */
} .parent::after {
content: "";
display: inline-block;
vertical-align: middle;
height: 100%;
/* width: 100%; */
} .son {
display: inline-block;
vertical-align: middle;
border: 1px solid red;
/* width: 100%; */
}

方式三:left:0;right:0;top:0;bottom:0;margin:auto;

优点:简单

缺点:没有足够空间时, 子元素会被截断, 但不会有滚动条.

  <div class="hv_parent">
<div class="hv_child1">
方式一:left:0;right:0;top:0;bottom:0;margin:auto;
</div>
</div>
.hv_parent {
position: relative;
width: 600px;
height: 180px;
border: 1px solid red;
} .hv_child1 {
border: 2px solid green;
position: absolute;
/* height: 40px; */
/* width: 400px; */
left: 10px;
right: 10px;
top: 0;
bottom: 0;
margin: auto;
}

方式四:left: 50%;top: 50%;transform: translate(-50%, -50%); [推荐]

优点:代码量少

缺点:IE8不支持, 属性需要追加浏览器厂商前缀, 可能干扰其他 transform 效果, 某些情形下会出现文本或元素边界渲染模糊的现象.

    <div class="hv_parent">
<div class="hv_child2">
方式二:left: 50%;top: 50%;transform: translate(-50%, -50%);
</div>
</div> .hv_parent {
position: relative;
width: 600px;
height: 180px;
border: 1px solid red;
}
.hv_child2 {
border: 2px solid blue;
/* margin-left:50%; */
/* margin-top: 50%; */
width: 400px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}

方式五:height:固定;width:固定;left:50%;top:50%;margin-top:-0.5height;margin-left:- 0.5width;

优点: 适用于所有浏览器.

缺点: 父元素空间不够时, 子元素可能不可见(当浏览器窗口缩小时,滚动条不出现时).如果子元素设置了overflow:auto, 则高度不够时, 会出现滚动条.

    <div class="hv_parent">
<div class="hv_child3">
方式三:height:固定;width:固定;left:50%;top:50%;margin-top:-0.5*height;margin-left:- 0.5*width;
</div>
</div>

__参考文献__
[1] (https://louiszhai.github.io/2016/03/12/css-center/)

结后语:

兄dei,实操吧!

不然做起来只看感觉都看懂了,一关闭我的文章就:嗯?水平居中都哪几种方式来着?再次打开看了之后回想:嗯?水平居中这几种方式都会有什么问题或优缺点?

看的时候都会以为看懂了:这不是很简单吗?

做的时候都突然感觉自己是个麻瓜:我去!这么简单怎么布局就不对呢?哪影响了?调好之后,咦~,怎么突然就好了呢?

所以,

别只看,请实操!!!

css知识笔记:水平垂直居中(别只看,请实操!!!)的更多相关文章

  1. css知识笔记:垂直居中(别只看,请实操!!!)

    css实现元素的垂直居中. (尝试采用5W2H方法说明): 别只看,请实操!!! What: 1.这篇文档主要描述元素水平方向居中的几种最常见和最实用的几种方式,并说明优缺点. 2.写这篇文章的目的, ...

  2. css知识笔记:水平居中(别只看,请实操!!!)

    css实现元素的水平居中. (尝试采用5W2H方法说明): 别只看,请实操!!! What: 1.这篇文档主要描述元素水平方向居中的几种最常见和最实用的几种方式,并说明优缺点. 2.写这篇文章的目的, ...

  3. Flexbox制作CSS布局实现水平垂直居中

    Flexbox实现一个div元素在body页面中水平垂直居中: <!DOCTYPE html><html lang="en"><head>  & ...

  4. 【最全】CSS盒子(div)水平垂直居中居然还有这种方式

    最全的CSS盒子(div)水平垂直居中布局,对CSS 布局掌握程度决定你在 Web 开发中的开发页面速度. 相对于屏幕 方法一:利用定位 <div class="box"&g ...

  5. CSS布局之-水平垂直居中

    对一个元素水平垂直居中,在我们的工作中是会经常遇到的,也是CSS布局中很重要的一部分,本文就来讲讲CSS水平垂直居中的一些方法.另外,文中的css都是用less书写的,如果看不懂less,可以把我给的 ...

  6. CSS(3)实现水平垂直居中效果

    CSS实现水平垂直居中对齐 在CSS中实现水平居中,会比较简单.常见的,如果想实现inline元素或者inline-block元素水平居中,可以在其父级块级元素上设置text-align: cente ...

  7. 解读 CSS 布局之水平垂直居中

    对一个元素水平垂直居中,在我们的工作中是会经常遇到的,也是CSS布局中很重要的一部分,本文就来讲讲CSS水平垂直居中的一些方法.由于我们大搜车的日常工作中已经不再需要理会低版本IE,所以本文所贴出的方 ...

  8. CSS实现元素水平垂直居中—喜欢对称美,这病没得治

    [TOC] 在CSS中对元素进行水平居中是非常简单的:如果它是一个行内元素,就对它的父元素应用text-align:center;如果它是一个块级元素,就对它自身应用margin:auto.然而要对一 ...

  9. CSS制作图片水平垂直居中

    所谓的图片水平垂直居中就是把图片放在一个容器元素中(容器大于图片尺寸或是指定了大小的容器),并且图片位居此容器正中间(中间是指元素容器的正中间),而图片不是以背景图片(background-image ...

随机推荐

  1. 基于webpack实现多html页面开发框架五 开发环境配置 babel配置

    一.解决什么问题      1.开发环境js.css不压缩,可在浏览器选中代码调试      2.开发环境运行http服务指向打包后的文件夹      3.babel输出浏览器兼容的js代码 二.需要 ...

  2. 在 Xcode9 中自定义文件头部注释和其他文本宏

    在 Xcode9 中自定义文件头部注释和其他文本宏 . 参考链接 注意生成的plist文件的名称为IDETemplateMacros.plist 在plist文件里设置自己想要的模板 注意plist存 ...

  3. mininet(二)简单的路由实验

    mininet(一)实验环境搭建 mininet(二)简单的路由实验 mininet(三)简单的NAT实验 在网上找了 好几个代码都是不能直接复现成功,这里把自己实现成功的代码给大家演示一下. 实验的 ...

  4. CodeForces845G-Shortest PathProblem?

    You are given an undirected graph with weighted edges. The length of some path between two vertices ...

  5. CentOS7.2下PXE+kickstart自动化安装系统

    一.实验环境 操作系统:CentOS Linux release 7.2.1511 (Core) 网卡地址:192.168.100.147/24 光盘镜像:CentOS-7-x86_64-Minima ...

  6. ARTS-S python把非汉语和非字母的字符替换成空格

    # coding: utf-8 import re text = "aa[bb,aa#cWc中a国" FILTER_PUNTS = re.compile("[^\u4E0 ...

  7. Web 前端学习大纲

    什么是前端? 前端即网站前台部分,也叫前端开发,运行在PC端,移动端等浏览器上展现给用户浏览的网页.随着互联网的发展,HTML5,CSS3,前端框架的应用,跨平台响应式网页设计能够适应各种屏幕分辨率, ...

  8. Django 11

    目录 功能配置设计 跨站请求伪造CSRF 什么是CSRF 如果实现CSRF 如何避免CSRF CSRF相关的两个装饰器 auth模块 常用方法 扩展auth_user表中的字段 功能配置设计 实现类似 ...

  9. python为前端提供API

    作为一名前端来学习后端语言,有难度啊.这里把第一次尝试的过程做个记录 1.网上看到Python给前端提供API可以使用python的flaskweb框架 #py文件 import json from ...

  10. 3年Java开发都知道的Redis数据结构和通用命令

    Redis的数据结构 Redis支持多种不同的数据结构,包括5种基础数据结构和几种比较复杂的数据,这些数据结构可以满足不同的应用场景. 五种基础数据结构 String:字符串,是构建其他数据结构的基础 ...