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.行内元素居中 ...
随机推荐
- CentOS下MySQL的安装
MySQL数据库是一款比较常用的数据库,大家在练习安装时,可能会遇到各种各样的问题,请大家参考在CentOS系统下MySQL数据库的安装方式.如有任何问题,欢迎留言,本人随时解答. MySQL安装步骤 ...
- animate-queue和step-animate
Step-animate: 分为3部分:{配置},{step:function(){...},duration:1000} <div id="warpper" style=& ...
- 解决laravel Class 'Doctrine\DBAL\Driver\PDOMySql\Driver' not found 错误
这个错误的原因来自于没有安装一个依赖库: 官方文档说明如下: Modifying Columns Prerequisites Before modifying a column, be sure to ...
- windows下vagrant的安装使用
vagrant是简便虚拟机操作的一个软件,而使用虚拟机有几个好处: 1.为了开发环境与生产环境一致(很多开发环境为windows而生产环境为linux),不至于出现在开发环境正常而移步到正式生产环境时 ...
- webstorm2018.1 汉化
https://github.com/pingfangx/TranslatorX 这个百度云 选择webstorm 选择勾选的文件 选择你下载webstorm 的版本 我下载的是2018.1的 之后等 ...
- git排除插件(.ignore)配置
# Created by .ignore support plugin (hsz.mobi) ### Maven template target/ ### JetBrains template # C ...
- sqlserver简便创建用户并授权
很多研发人员程序连接SQL Server直接用的就是SA帐号.如果对数据库管理稍微严格一点的话,就不应该给应用程序这种权限,通常应用程序只需要进行增删改查,而很少有DDL操作,因此配置帐号时应该遵循“ ...
- WDS和DHCP配置说明
网络启动程序 (NBP) 是网络启动过程中第一个下载和执行的文件,它可以控制启动开始时的体验(例如,用户是否必须按 F12 才能开始网络启动) WDS服务器配置说明: 1)如果WDS和DHCP安装在同 ...
- DVWA-暴力破解学习笔记
DVWA-暴力破解 1.暴力破解 2.burp安装证书 3.万能密码 一.暴力破解 burp四种暴力破解类型: sniper 一个字典,两个参数,先匹配第一项再匹配第二项 Battering ra ...
- scp远程拷贝文件及文件夹
scp : 远程copy 命令 -r : 递归copy 从Linux Copy 到 Linux 从Linux Copy 到 Windows (当前目录使用. 就可以了) scp -r root@10. ...