CSS 水平居中/布局 垂直居中 (月经问题)
水平居中
- 如果它是一个行内元素 对其父元素使用 text-align:center 即可实现。
<p style = " text-align:center; width:300px; background-color:pink;">妈妈再也不担心我的学习了</p>
2.如果它是一个块级元素:
A. margin 方法
<div style="background-color: greenyellow; ">
<div style="margin:0 auto; width: 300px;background-color: gold;">
我是一只小小鸟,飞啊飞啊,我的骄傲放纵。
</div>
</div>
B. table布局:水平布局,但也可以实现让某块级元素水平居中的效果。
<table style="table-layout:fixed;border:2px solid black;width:100%; ">
<colgroup>
<col span="1" style="width: 25%;">
<col span="1" style="width: 50%;">
<col span="1" style="width: 25%;">
</colgroup>
<tbody>
<td style="background-color:green;">green</td>
<td style="background-color:red;">red</td>
<td style="background-color:blue;">blue</td>
</tbody>
</table>
C. flex 盒子:这里主要演示块级元素的情况,它也可在行内元素里使用。是现在比较流行的一种水平布局的方式。
行内元素中: display : inline-flex;
在webkit内核中: display : -webkit-flex;
<div style="display: flex; flex-flow: row nowrap; justify-content: center; background-color: darkgrey; height: 50px;">
<div style="flex:0 1 auto; background-color: orange;">A</div>
<div style="flex:0 1 50px; background-color: blueviolet; ">B </div>
<div style="flex:0 1 auto; background-color: gray; ">C </div>
</div>
父元素:
flex-flow: flex-drection||flex-wrap;
flex-direction: row(左→右);
flex-wrap:nowrap(不折行);
justify-content(主轴对齐方式):center;
子集:
flex:flex-grow(项目放大比例) flex-shrink(项目缩小比例) flex-basis(为项目预留的空间,个人认为它可实现width的功能);
关于flex的详细学习,大家可以看这两篇文章,写的很赞哦。
https://demo.agektmr.com/flexbox/
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool
垂直居中
绝对定位的垂直居中的方法
A.main {
position: absolute;
top: calc(50% - 4em);
left: calc(50% - 6em);
width: 12em;
height: 8em;
background-color: aqua;
} <main>
<h1>hello word!</h1>
<p>Center </p>
</main>
这个方法固定了高度和宽度,不是由内容来决定的。现在我们对代码稍微改进一下。
B.main{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background-color: yellow;
} <main>
<h1>hello word!</h1>
<p>Center </p>
</main>这里用transform:translate();巧妙的让main居中了,但是在过多会溢出页面。
不使用绝对定位时
main {
width: 12em;
padding: 1em 1.5em;
background-color: darkgoldenrod;
margin: 50vh auto 0;
transform: translateY(-50%);
}
<main>
<h1>hello word!</h1>
<p>Center </p>
</main>
这个满足了我们让块级元素垂直居中的基本要求,但是这个技巧的实用性是有限的,它只适用于在视口居中的情况。
- flex
.contain {
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-content: center;
align-items: center;
height: 400px;
background-color: darkkhaki;
/*height: 100vh;*/
}
.son{
flex: 0 1 auto;
align-self: center;
background-color:darkviolet;
}
<div class="contain">
<div class="son">
<h1>hello word!</h1>
<p>Center </p>
</div>
</div>
它不仅仅可以在视口中垂直居中,还可以在其他块级元素内垂直居中。
相对flex有更深的了解,可以去看一下前面的两个链接里的内容。
感谢阅读,喜欢请点赞,有问题可以留言。以上内容参考了《CSS揭秘》这本书,一本有趣的CSS书。全剧终,谢谢!
CSS 水平居中/布局 垂直居中 (月经问题)的更多相关文章
- CSS 水平居中与垂直居中
前言 在CSS布局中,水平居中与垂直居中一直是用到比较多的,在本篇中将介绍水平居中.垂直居中的几种方式. 示例 HTML: <div class="parent"> & ...
- CSS水平居中和垂直居中解决方案
一.CSS 居中 — 水平居中 DIV等标签本身没有定义自己居中的属性,网上很多的方法都是介绍用上级的text-align: center,然后嵌套一层DIV来解决问题. 可是这个方法有时候完全不起作 ...
- CSS网页布局垂直居中整理
一.使用CSS3处理垂直居中方式 1.使用Flex布局处理(推荐),简单好用 body,html{ width:100%; height:100%; } .out { width: 20%; heig ...
- CSS水平居中与垂直居中的方法
一.水平居中 1.行内元素水平居中 在父元素里添加text-align:center即可.代码如下: <style> .container-1 { height: 50px; border ...
- css水平居中和垂直居中
水平居中:内联元素:text-align:center;相对于父级居中显示块级元素:margin:0 auto;但是需要同时width,否则无法看到效果多个块级元素居中:在此想要探讨一下display ...
- CSS 水平居中和垂直居中
1.水平居中——行内元素 text-align: center; 2.水平居中——定宽块状元素 margin: auto,满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto” ...
- 主流 CSS 布局(水平居中、垂直居中、居中 )
什么是布局 html 页面的整体结构或骨架 布局不是某个技术内容 而是一种设计思想 [ 布局方式 ] 水平居中布局 垂直居中布局 居中布局( 水平 + 垂直 ) 什么是水平居中布局 水平居中布局 元素 ...
- CSS的水平居中和垂直居中解决方案
在写CSS样式的时候,有时为了美观,会添加水平居中和垂直居中,这时候你有可能会遇到很棘手的问题,有些水平居中和垂直居中的属性添加上去完全没反应,下面给大家列举一些CSS水平居中和垂直居中的终极解决方案 ...
- css之布局
布局一直是页面制作很重要的部分,有个良好的布局不仅在页面上呈现很好的效果,还对后续功能扩展有重要的作用.本文主要讨论一下几种布局: 水平居中布局 垂直居中布局 多列布局 自适应布局 stracky-f ...
随机推荐
- 问题(一)---线程池,锁、堆栈和Hashmap相关
一.线程池: 多线程技术主要解决处理器单元内多个线程执行的问题,它可以显著减少处理器单元的闲置时间,增加处理器单元的吞吐能力. 假设一个服务器完成一项任务所需时间为:T1 创建线程时间,T2 在线程中 ...
- [Machine Learning]学习笔记-线性回归
模型 假定有i组输入输出数据.输入变量可以用\(x^i\)表示,输出变量可以用\(y^i\)表示,一对\(\{x^i,y^i\}\)名为训练样本(training example),它们的集合则名为训 ...
- jQuery中使用$.each()遍历后台响应的json字符串问题
今天在做练习项目的时候,使用$.each()方法遍历后台传过来的json字符串时,chrome浏览器中发现如下问题 Cannot use 'in' operator to search for 'l ...
- Java之多态
一.多态 1.含义 一种类型,呈现多种状态.主要关注类多态.方法多态. 2.多态的前提:继承 使用父类引用指向子类对象: Animal a1 = new Cat(): Object a1 = new ...
- 一个三维点类Gpoint3的实现
1 类设计 基本功能 (1)默认构造时,自动初始化为(0,0,0): (2)支持点之间的加.减运算: (3)支持点与常量数据的加.减.乘除运算: (4)支持点之间的相等或不能判断 (5)如果把点类看作 ...
- codeforces 895A Pizza Separation 枚举
codeforces 895A Pizza Separation 题目大意: 分成两大部分,使得这两部分的差值最小(注意是圆形,首尾相连) 思路: 分割出来的部分是连续的,开二倍枚举. 注意不要看成0 ...
- CCF-201509-3-生成模板系统
问题描述 试题编号: 201509-3 试题名称: 模板生成系统 时间限制: 1.0s 内存限制: 256.0MB 问题描述: 问题描述 成成最近在搭建一个网站,其中一些页面的部分内容来自数据库中不同 ...
- rabbitmq(中间消息代理)在python中的使用
在之前的有关线程,进程的博客中,我们介绍了它们各自在同一个程序中的通信方法.但是不同程序,甚至不同编程语言所写的应用软件之间的通信,以前所介绍的线程.进程队列便不再适用了:此种情况便只能使用socke ...
- Gitlab一键端的安装汉化及问题解决(2017/12/14目前版本为10.2.4)
Gitlab的安装汉化及问题解决 一.前言 Gitlab需要安装的包太TM多了,源码安装能愁死个人,一直出错,后来发现几行命令就装的真是遇到的新大陆一样... ... 装完之后感觉太简单,加了汉化补丁 ...
- CentOS7脱机安装SQL Server 2017
SQL Server on Linux也发布一段时间了,官方上支持Red Hat, SUSE, Ubuntu.手上没有以上Linux版本,选用了与Red Hat最接近的CentOS7.4来进行安装和测 ...