内联元素居中方案

水平居中设置:

  1. 行内元素 设置 text-align:center;

  2. Flex布局 设置display:flex;justify-content:center;(灵活运用)

垂直居中设置:

  1. 父元素高度确定的单行文本(内联元素) 设置 height = line-height;
  2. 父元素高度确定的多行文本(内联元素) a:插入 table (插入方法和水平居中一样),然后设置 vertical-align:middle; b:先设置 display:table-cell 再设置 vertical-align:middle;

    块级元素居中方案

    水平居中设置:

  3. 定宽块状元素 设置 左右 margin 值为 auto;

  4. 不定宽块状元素 a:在元素外加入 table 标签(完整的,包括 table、tbody、tr、td),该元素写在 td 内,然后设置 margin 的值为 auto; b:给该元素设置 display:inine 方法; c:父元素设置 position:relative 和 left:50%,子元素设置 position:relative 和 left:50%;

垂直居中设置:

  • 1.使用position:absolute(fixed),设置left、top、margin-left、margin-top的属性;

    .box{
    position:absolute;/*或fixed*/
    top:50%;
    left:50%;
    margin-top:-100px;
    margin-left:-200px;
    }
    • 2.利用position:fixed(absolute)属性,margin:auto这个必须不要忘记了;
.box{
position: absolute;或fixed
top:0;
right:0;
bottom:0;
left:0;
margin: auto;
}
  • 3.利用display:table-cell属性使内容垂直居中,这个方法在多行文字居中的时候用的比较多;

HTML代码:

<div class="box">
<span>多行文字,此处居中设置</span>
</div>

CSS代码:

.box{
display:table-cell;
vertical-align:middle;
text-align:center;
width:100px;
height:120px;
background:purple;
}
.box span{
display: inline-block;
vertical-align: middle;
}
  • 4.使用css3的新属性transform:translate(x,y)属性;
.box{
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
-ms-transform:translate(-50%,-50%);
}
  • 5.最高大上的一种,使用before,after伪元素;

HTML代码:

<div class='box'>
<div class='content'>
垂直居中
</div>
</div>

CSS代码:

.box{
position:fixed;
display:block;
background:rgba(0,0,0,.5);
}
.box:before{
content:'';
display:inline-block;
vertical-align:middle;
height:100%;
}
.box:after{
content:'';
display:inline-block;
vertical-align:middle;
height:100%;
}
.box .content{
width:60px;
height:60px;
line-height:60px;
color:red;
}
  • 6.Flex布局;
.box{
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
水平居中
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-pack:center;
-webkit-justify-content: center;
-moz-justify-content: center;
justify-content: center;
垂直居中
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-align:center;
-webkit-align-items: center;
-moz-align-items: center;
align-items: center;
}

CSS的垂直居中和水平居中总结的更多相关文章

  1. CSS垂直居中和水平居中

    前言 CSS居中一直是一个比较敏感的话题,为了以后开发的方便,楼主觉得确实需要总结一下了,总的来说,居中问题分为垂直居中和水平居中,实际上水平居中是很简单的,但垂直居中的方式和方法就千奇百怪了. 内联 ...

  2. css居中问题:水平居中、垂直居中

    亲们支持我的新博客哦==>原文地址 ) 本篇文章所有演示代码下载==>github/calamus0427 css水平垂直居中是面试时候遇到最多的问题,我总结一下大部分解决方案 水平居中: ...

  3. HTML/CSS:图片居中(水平居中和垂直居中)

    css图片居中(水平居中和垂直居中) css图片居中分css图片水平居中和垂直居中两种情况,有时候还需要图片同时水平垂直居中, 下面分几种居中情况分别介绍: css图片水平居中 1.利用margin: ...

  4. css/css3 未知元素宽高,垂直居中和水平居中

    未知元素的宽高情况下  垂直居中和水平居中 第一种 flex盒布局 (推荐) /*弹性盒模型*/ /*主轴居中对齐*/ /*侧轴居中对齐*/ .ele{ display:flex; justify-c ...

  5. 通过设置CSS属性让DIV水平居中

    通过设置CSS属性让DIV水平居中 ---------------------- <html> <head> <title></title> <m ...

  6. 五种方法让CSS实现垂直居中

    利用 CSS 来实现对象的垂直居中有许多不同的方法,比较难的是选择那个正确的方法.我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站. 使用 CSS 实现垂直居中并不容易.有些方法在一些浏览器 ...

  7. CSS实现垂直居中的5种方法

    利用 CSS 来实现对象的垂直居中有许多不同的方法,比较难的是选择那个正确的方法.我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站. 使用 CSS 实现垂直居中并不容易.有些方法在一些浏览器 ...

  8. [转]-CSS 元素垂直居中的6种方法

    原文地址:http://blog.zhourunsheng.com/2012/03/css-%E5%85%83%E7%B4%A0%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD ...

  9. CSS水平垂直居中总结

    行内元素水平居中 把行内元素包裹在块级父元素中,且父元素中的css设置text-align:center; <!DOCTYPE html> <html> <head> ...

随机推荐

  1. mariadb yum安装

    安装 yum install mariadb mariadb-server -y 启动 systemctl start mariadb systemctl enable mariadb 安全安装 # ...

  2. P1977 出租车拼车(DP)

    题目背景 话说小 x 有一次去参加比赛,虽然学校离比赛地点不太远,但小 x 还是想坐 出租车去.大学城的出租车总是比较另类,有“拼车”一说,也就是说,你一个人 坐车去,还是一堆人一起,总共需要支付的钱 ...

  3. Vue 2 --v-model、局部组件和全局组件、父子组件传值、平行组件传值

    一.表单输入绑定(v-model 指令) 可以用 v-model 指令在表单 <input>.<textarea> 及 <select> 元素上创建双向数据绑定. ...

  4. Spark最简安装

    该环境适合于学习使用的快速Spark环境,采用Apache预编译好的包进行安装.而在实际开发中需要使用针对于个人Hadoop版本进行编译安装,这将在后面进行介绍. Spark预编译安装包下载——Apa ...

  5. Android模拟器使用SD卡

    在Android的应用开发中经常要用到与SD卡有关的调试,本文就是介绍关于在Android模拟器中SD卡的使用 一.      准备工作 在介绍之前首先做好准备工作,即配好android的应用开发环境 ...

  6. SpringBoot | 第八章:统一异常、数据校验处理

    前言 在web应用中,请求处理时,出现异常是非常常见的.所以当应用出现各类异常时,进行异常的捕获或者二次处理(比如sql异常正常是不能外抛)是非常必要的,比如在开发对外api服务时,约定了响应的参数格 ...

  7. Cucumber 场景大纲 Scenario Outlines

    引用链接:https://github.com/cucumber/cucumber/wiki/Scenario-Outlines script/cucumber --i18n zh-CN | feat ...

  8. mysql存储方式MyISAM 和 InnoDB的区别

    MyISAM 和 InnoDB 讲解: InnoDB和MyISAM是许多人在使用MySQL时最常用的两个表类型,这两个表类型各有优劣,视具体应用而定.基本的差别为:MyISAM类型不支持事务处理等高级 ...

  9. Android Service创建USB HOST通信

    之前做了一个关于Android USB通信的Case,通过Android的USB总线给Zigbee供电,和板载的Zigbee(基于Zigbee的自组网)进行通信.要使用Android的USB Host ...

  10. 抓包工具wireshark的使用--过滤语句

    鲨鱼鳍的图标 抓包很方便