CSS中各种居中的问题
1.元素水平居中
1.1 在父元素上使用text-align: center;
father {
text-align: center;
}
1.2 margin: 0 auto;
在上一个问题中，我们说过，块级元素的特性是自动在宽度上填充父元素，有内容的地方自然是内容，而其余的地方使用margin填充。因此我们可以利用左右相等的margin来使元素居中。
<style type="text/css">
#container {
height: 100px;
background: gray;
}
#testDiv1{
height: 100px;
margin: 0 auto;
width: 100px;
background: black;
}
</style>
<body>
<div id="container">
<div id="testDiv1"></div>
</div>
</body>
1.3 多个块级元素在一行内居中
众所周知，行级元素不能设置宽高，只能根据内容决定大小，那么想让多个块级矩形居中要怎么做呢？
块级元素独占一行，要怎么才能不独占呢？
可以设置成行内块级 inline-block，然后父元素给text-align：center
<style type="text/css">
#container {
text-align: center;
height: 100px;
background: gray;
}
.mydiv {
display: inline-block;
width: 100px;
height: 100px;
background: red;
}
</style>
<body>
<div id="container">
<div class="mydiv"></div>
<div class="mydiv"></div>
<div class="mydiv"></div>
</div>
</body>
1.4 设置距离左边50%，再用负margin拉回去
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
2.垂直居中
2.1 单行行内元素居中
思路：设置display为inline-block，并给出行高等于元素高度
<head>
<style>
div {
width: 200px;
height: 200px;
background: rgb(30, 186, 250);
}
/*设置父块大小及颜色*/ div a {
text-decoration: none;
font-size: 25px;
color: rgb(254, 7, 183);
font-weight: 700;
line-height: 200px;
}
/*设置内联元素的行高等于父块高度的行高即可实现垂直居中*/
</style>
</head> <body>
<div><a href="#">测试链接</a></div>
</body>
2.2 设置距离父元素50%，再用margin拉回去
<!DOCTYPE html>
<html lang="zh"> <head>
<style>
*{
margin: 0;
padding: 0;
}
body {
height: 95vh;
}
.test{
height: 100px;
width: 100px;
background: red;
position: absolute;
top: 50%;
margin-top: -50px;
}
</style>
</head> <body>
<div style="height: 600px">
<div class="test"> </div>
</div>
</body> </html>
若想基于视口的垂直居中可将relative换为absolute
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
2.3 table-cell + vertical-align:middle
设置父元素display为table-cell，并给vertical-align: middle;
3 我最喜欢的方法，flex布局天下第一！
总结：垂直 + 水平居中示例
需求，在页面最中间显示一个button。
<!DOCTYPE html>
<html lang="zh"> <head>
<style>
body {
height: 100vh;
margin: 0;
padding: 0;
text-align: center;
}
/* button { } */
span {
display: inline-block;
height: 100vh;
line-height: 100vh;
}
a {
text-decoration: none;
padding: 10px 20px;
border-radius: 5%;
box-shadow: 0 2px 5px rgba(0, 0, 0, .3);
}
</style>
</head> <body>
<span>
<a href="">click me</a>
</span>
</body> </html>
效果：
或者用 flex布局一键解决！
CSS中各种居中的问题的更多相关文章
- css中关于居中的那点事儿
css中关于居中的那点事儿 关于居中,无论是水平居中,还是垂直居中都有很多方式,下面我来介绍一些常用的. 第一部分:水平居中 1.实现行内元素的居中.方法:在行内元素外面的块元素的样式中添加:text ...
- css中各种居中的奇技淫巧总结
css中各种居中的奇技淫巧总结 第一种,在固定布局中比较常用的技巧设置container的margin:0 auto: 第二种(从布局中入手) css .outer{ height:200 ...
- css中的居中问题
前两天写了一篇关于display:table的用法,里面涉及到居中的问题,这两天愈发觉得css中的居中是一个值得关注的问题,现总结如下. 一.垂直居中 (1)inline或者inline-*元素 1. ...
- CSS中各种居中方法
CSS中各种居中方法,本文回顾一下,便于后续的使用. 水平居中方法 1.行内元素居中 行内元素居中是只针对行内元素的,比如文本(text).图片(img).按钮等行内元素,可通过给父元素设置 text ...
- CSS中各种各样居中方法的总结
在开发前端页面的时候,元素的居中是一个永远都绕不开的问题.看似简单的居中二字,其实蕴含着许许多多的情况,对应着很多的处理方法,本文就试图对页面布局中的居中问题进行总结~~ 居中问题分为水平居中和竖直居 ...
- css中关于居中的问题
居中是最常用的一种css格式,不同的居中方法适和不同的环境中,下面总结了几种常用的居中方法,你可以不用它,但是无论你是一个资深前端大牛,还是小小初学者,当你见到它的时候不认识它就是你的不对啦!!! h ...
- css中元素居中总结
很多时候,我们需要让元素居中显示:1. 一段文本的水平居中,2. 一张图片的水平居中,3. 一个块级元素的水平居中:4. 单行文本的竖直居中,5. 不确定高度的一段文本竖直居中,6. 确定高度的块级元 ...
- css中的居中的方法
一.垂直居中 (1)inline或者inline-*元素 1. 单行文字 设置上下padding相等 以前一直以为inline元素是没有上下的padding和margin的,其实不然,他们是有上下的p ...
- CSS中的各种居中方法总结
CSS中的居中可分为水平居中和垂直居中.水平居中分为行内元素居中和块状元素居中两种情况,而块状元素又分为定宽块状元素居中和不定宽块状元素居中.下面详细介绍这几种情况. 一.水平居中 1.行内元素居中 ...
随机推荐
- 为 Eureka 服务注册中心实现安全控制
上一篇Eureka 实现微服务注册发现讲了用 Eureka 实现单体版的服务注册与发现.因为本篇是在上一篇的基础上的一点扩充,所以读此篇之前要保证看了上一篇. Eureka 如果不加安全控制,会存在下 ...
- 基于IIS的WCF
(1)创建WCF服务应用程序 (2)配置IIS 将WCF服务应用程序配置IIS网站,需要使用.net4.0集成版本的程序池 (3)使用SvcUtil.exe生成客户端代码和配置 SvcUtil.exe ...
- Struts2笔记_拦截器
A.拦截器是什么 --- Interceptor:拦截器,起到拦截Action的作用. ---Filter:过滤器,过滤从客户端向服务器发送的请求. ---Interceptor:拦截器,拦截是客户端 ...
- python之循环（增删）内使用list.remove()
dat=['] for item in dat: ': dat.remove(item) print(dat) #按要求是把'0'都删掉的,输出结果是['1', '2', '3', '0'] ?? 首 ...
- 超大文本文件浏览器Snaptext，支持不限制大小的文本文件浏览
文本文件超过1G就很少有软件可以打开了,超过10G就只有有限的几个可以打开了,那20G.30G.100G呢? Snaptext超大文本浏览器,应该是世界上最快速的文本文件浏览器,它支持基本不限制大小的 ...
- 如何去掉(隐藏)系统的StatusBar（状态栏）
在定制TV版本中,经常需要去掉StatusBar的需求,那么如何更好更方便的去掉StatusBar呢? StatusBar是Android系统中重要的组成部分,可以看到一些提 ...
- java8及8之前日期相关类
java 8日期相关类 Instant:精确到纳秒的时间戳 Duration:处理有关基于时间的时间量 LocalDate:只包含日期,比如:2016-10-20 LocalTime:只包含时间,比如 ...
- python-对requests请求简单的封装
# coding:utf-8 import requests class send_request: def __init__(self,url,method,data=None): self.res ...
- Django ORM 使用原生 SQL
使用原生sql的 方法 : raw # row方法:(掺杂着原生sql和orm来执行的操作) res = CookBook.objects.raw('select id as nid from epo ...
- 影响Linux发展的四位天才黑客
影响Linux发展的四位天才黑客 相信大家对 Linux 再熟悉不过了.我们都知道 Linux继承自 Unix,但其实他们上一代还有一个 Multics.从最早的 Multics 发展到最早版本的 L ...