CSS网页元素居中
1.水平居中:行内元素解决方案
只需要把行内元素包裹在一个属性display为block的父层元素中,并且把父层元素添加如下属性即可:
text-align: center
适用元素:文字,链接,及其其它inline或者inline-*类型元素(inline-block,inline-table,inline-flex)
2.水平居中:块状元素解决方案
对于块状元素(display:block)来说,我们需要将它的左右外边距(即,margin-left,margin-right)设置为auto,即可实现块状元素的居中,如下:
- .center{
- /* 这里可以设置顶端外边距 */
- margin: 10px auto;
- }
3.水平居中:多个块状元素解决方案
如果页面里有多个块状元素需要水平排列居中,可以将元素的display属性设置为inline-block,并且把父元素的text-align属性设置为center即可实现。
4. 水平居中:多个块状元素解决方案 (使用flexbox布局实现)
使用flexbox布局,只需要把待处理的块状元素的父元素添加属性display:flex及justify-content:center即可
5.垂直居中:单行的行内元素解决方案
当一个行内元素,即inline,inline-*类型的元素需要居中的话,可以将它的height和line-height同时设置为父元素的高度即可实现垂直居中效果。
- #container{
- background: #222;
- height: 200px;
- }
- /* 以下代码中,将a元素的height和line-height设置的和父元素一样高度即可实现垂直居中 */
- a{
- height: 200px;
- line-height:200px;
- color: #FFF;
- }
6.垂直居中:多行的行内元素解决方案
组合使用display:table-cell和vertical-align:middle属性来定义需要居中的元素的父容器元素生成效果,如下:
- .container{
- background: #222;
- width: 300px;
- height: 300px;
- /* 以下属性垂直居中 */
- display: table-cell;
- vertical-align:middle;
- }
7.垂直居中:已知高度的块状元素解决方案
定义居中元素的相关属性,如下:
- /* 以下为居中代码 */
- .item{
- top: 50%;
- margin-top: -50px;
- position: absolute;
- padding:0;
- }
8. 垂直居中:未知高度的块状元素解决方案
对于无法知道高度的元素,使用transform属性来垂直移动来实现垂直居中:
- .item{
- top: 50%;
- position: absolute;
- transform: translateY(-50%); /* 这里我们使用css3的transform来达到类似效果 */
- }
9.水平垂直居中:已知高度和宽度的元素解决方案
类似我们前面学到的方法,我们可以设置元素定位为absolute,并且设置top, left绝对值为50%,margin-top和margin-left为元素高度一半的负值即可,如下:
- .item{
- position: absolute;
- top: 50%;
- left: 50%;
- margin-top: -75px;
- margin-left: -75px;
- }
10.水平垂直居中:使用flex布局实现
相关代码如下:
- .parent{
- display: flex;
- justify-content:center;
- align-items: center;
- /* 注意这里需要设置高度来查看垂直居中效果 */
- background: #AAA;
- height: 300px;
}
11.水平垂直居中:使用flex布局实现
相关代码如下:
- .parent{
- display: flex;
- justify-content:center;
- align-items: center;
- /* 注意这里需要设置高度来查看垂直居中效果 */
- background: #AAA;
- height: 300px;
- }
相关代码参考:http://www.gbtags.com/gb/gbliblist/20.htm
CSS网页元素居中的更多相关文章
- 使用CSS完成元素居中的七种方法
在网页布局中元素水平居中比元素垂直居中要简单不少,同时实现水平居中和垂直居中往往是最难的.现在是响应式设计的时代,我们很难确切的知道元素的准确高度和宽度,所以一些方案不大适用.据我所知, 在CSS中至 ...
- 网页元素居中的n种方法
导语:元素居中对齐在很多场景看上去很和谐很漂亮.除此之外,对于前端开发面试者的基础也是很好的一个考察点.下面跟着作者的思路,一起来看下吧. 场景分析 一个元素,它有可能有背景,那我要它的背景居中对齐 ...
- css让元素居中显示
通常在absolute之后, 想让元素居中,都会采用margin-top:-[元素高度的一半]和 margin-left:-[元素宽度的一半] , 但是当我们的元素宽高不是固定的时候, 这就难办了, ...
- css实现元素居中
参见详细教程,该教程涵盖了所有居中的情况: https://css-tricks.com/centering-css-complete-guide/ css元素居中 1.水平居中 1)文本,图片等行 ...
- CSS实现元素居中原理解析
在 CSS 中要设置元素水平垂直居中是一个非常常见的需求了.但就是这样一个从理论上来看似乎实现起来极其简单的,在实践中,它往往难住了很多人. 让元素水平居中相对比较简单:如果它是一个行内元素,就对它的 ...
- css 使元素居中
css使元素水平居中 1.对于行内元素的水平居中 给父元素设置text-align:center <div style="text-align:center;">居中显 ...
- css中元素居中总结
很多时候,我们需要让元素居中显示:1. 一段文本的水平居中,2. 一张图片的水平居中,3. 一个块级元素的水平居中:4. 单行文本的竖直居中,5. 不确定高度的一段文本竖直居中,6. 确定高度的块级元 ...
- css 浮动元素居中
方法一 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...
- 【前端】使用CSS使元素居中的几种方式
Precondition: <div class="parent"> <div class="item">居中</div> ...
随机推荐
- adb安装和卸载apk的方式
昨天在使用adb卸载程序,结果死活卸载不了.我输入的命令和系统提示如下: D:\testApk>adb uninstall HelloWorld Failure 后来发现原来卸载程序时,只adb ...
- dedecms友情链接flink的调用方法
标记名称:flink[标签简介][功能说明]:用于获取友情链接,其对应后台文件为"includetaglibflink.lib.php".[适用范围]:全局标记,适用V55,V56 ...
- 微信JS-SDK 接口调用与 php 遇到的坑
问题:config:invalid signature一直爆这个错误 解决: 看我把这些坑都总结了一下:要命的invalid signature. https://segmentfault.com/q ...
- 使用 OpenWrt Image Generator 为 WR703N 路由器定制固件
标题:使用 OpenWrt Image Generator 为 WR703N 路由器定制固件 之前试着自己编译固件,编译是成功了,但是在后期安装官方仓库的ipk时出现问题,因为自己编译的固件和官方固件 ...
- LDD命令--可执行文件依赖的库出现错误时
http://littlepig3056.blog.163.com/blog/static/180758353201212751814134/ ldd 查看可执行文件依赖的库,结果会列出依赖的库名及 ...
- 记事本创建servlet在tomcat中发布基本思路
在webapps中新建文件夹H,在其中再创建WEB-INF文件夹,在创建classes文件夹和web.xml文件,web.xml需要配置一下,classes文件夹中存放Servlet经编译过的clas ...
- Codeforces 366C Dima and Salad
http://codeforces.com/problemset/problem/366/C 题意:在一个冰箱里有n种水果,并且这些水果每一种都有一个美味度和一个卡路里的属性, 小明要从这些水果中选出 ...
- LeetCode_Search a 2D Matrix
Write an efficient algorithm that searches for a value in an m x n matrix. This matrix has the follo ...
- Keil C51里关于堆栈指针的处理
Keil C是非常优秀的C51编译器,可能是最好的C51编译器,提供各种优化模式,对变量的优化和地址安排做得非常好.这是用C语言写代码的好处之一,如果用汇编写,得费一大番功夫给各个变量安排内存物理地址 ...
- (\S)? 匹配0个或者一个前导字符
---------------------------------------------- "1" 模式: \"(?<id>(\S+)?)\" ? ...