css中各种居中的奇技淫巧总结

  第一种，在固定布局中比较常用的技巧设置container的margin：0 auto；

  第二种（从布局中入手）

  css

 .outer{

     height:200px;

     width:200px;

     background:gray;

     position:relative;

 }

 .inner{

     width:100px;

     height:100px;

     top:50%;

     left:50%;

     background:black;

     position:absolute;

     margin-left:-50px;

     margin-top:-50px;

 }

html

 <div class="outer">

     <div class="inner"></div>

   </div>

效果

第三种；单行文字居中

.info{

     /*

     1.前提设置固定的高

     2.只能有一段文字

     */

     height:100px;

     line-height:100px;

     border:1px solid blue;

     text-align:center; /*如要要垂直居中的话就加上它把*/

 }

第四种

table布局

<table style="width: 100%;">

  <tr>

     <td style="text-align: center; vertical-align: middle;">

          这个也是可以居中的滴呀

     </td>

  </tr>

</table>

也可以改成是我们的div

css：

 .outer{

     display:table;

     width:100%;

 }

 .inner{

     display:table-cell;

     text-align:center;

     vertical-align:middle;

     /*而且：

       水平和垂直方向都居中了滴呀

     */

 }

html

 <div class="outer">

   <div class="inner">居中</div>

 </div>

第五种：translate

css

 .center{

     position:fixed;

     top:50%;

     left:50%;

     background:#000;

     width:50%;

     height:50%;

     -webkit-transform:translateX(-50%) translateY(-50%);

 }

附带兼容性写法：

-webkit-transform: translateX(-50%) translateY(-50%);

-moz-transform: translateX(-50%) translateY(-50%);

-ms-transform: translateX(-50%) translateY(-50%);

transform: translateX(-50%) translateY(-50%);

html

<body>

  <div class="center"></div>

</body>

第六种：flex布局

 body{

     display:flex;/*flex布局方式*/

     display:-webkit-flex;

     align-items:center; /*水平方向上*/

     justify-content:center;/*垂直方向上的*/

 }

 .info{

     height:200px;

     width:200px;

     background:gray;

 }

css中各种居中的奇技淫巧总结的更多相关文章

  1. css中关于居中的那点事儿

    css中关于居中的那点事儿 关于居中,无论是水平居中,还是垂直居中都有很多方式,下面我来介绍一些常用的. 第一部分:水平居中 1.实现行内元素的居中.方法:在行内元素外面的块元素的样式中添加:text ...

  2. css中的居中问题

    前两天写了一篇关于display:table的用法,里面涉及到居中的问题,这两天愈发觉得css中的居中是一个值得关注的问题,现总结如下. 一.垂直居中 (1)inline或者inline-*元素 1. ...

  3. CSS中各种居中方法

    CSS中各种居中方法,本文回顾一下,便于后续的使用. 水平居中方法 1.行内元素居中 行内元素居中是只针对行内元素的,比如文本(text).图片(img).按钮等行内元素,可通过给父元素设置 text ...

  4. CSS中各种各样居中方法的总结

    在开发前端页面的时候,元素的居中是一个永远都绕不开的问题.看似简单的居中二字,其实蕴含着许许多多的情况,对应着很多的处理方法,本文就试图对页面布局中的居中问题进行总结~~ 居中问题分为水平居中和竖直居 ...

  5. css中关于居中的问题

    居中是最常用的一种css格式,不同的居中方法适和不同的环境中,下面总结了几种常用的居中方法,你可以不用它,但是无论你是一个资深前端大牛,还是小小初学者,当你见到它的时候不认识它就是你的不对啦!!! h ...

  6. CSS中各种居中的问题

    1.元素水平居中 1.1 在父元素上使用text-align: center; father { text-align: center; } 1.2 margin: 0 auto; 在上一个问题中,我 ...

  7. css中元素居中总结

    很多时候,我们需要让元素居中显示:1. 一段文本的水平居中,2. 一张图片的水平居中,3. 一个块级元素的水平居中:4. 单行文本的竖直居中,5. 不确定高度的一段文本竖直居中,6. 确定高度的块级元 ...

  8. css中的居中的方法

    一.垂直居中 (1)inline或者inline-*元素 1. 单行文字 设置上下padding相等 以前一直以为inline元素是没有上下的padding和margin的,其实不然,他们是有上下的p ...

  9. CSS中的各种居中方法总结

    CSS中的居中可分为水平居中和垂直居中.水平居中分为行内元素居中和块状元素居中两种情况,而块状元素又分为定宽块状元素居中和不定宽块状元素居中.下面详细介绍这几种情况. 一.水平居中 1.行内元素居中 ...

随机推荐

  1. MongoBD解决没有自动增长ID 的问题

    Sequence Numbers:序列号传统的数据库中,通常用一个递增的序列来提供主键,在 MongoDB中用 ObjectId 的来代替,我们可以通过如下的函数来获取主键 function coun ...

  2. 编写一个名为Test的主类，类中只有一个主方法； 在主方法中定义一个大小为50的一维整型数组，数组名为x，数组中存放着{1， 3，5,…,99}输出这个数组中的所有元素，每输出十个换一行；在主方法中定义一 个大小为10*10的二维字符型数组，数组名为y，正反对角线上存的是‘*’，其余 位置存的是‘#’；输出这个数组中的所有元素。

    package liu0915; import java.util.Random; public class Test0915sz { public static void main(String[] ...

  3. 多个mysql增加多个服务

    //mysql安装目录 mysqld --install mysqld --remove mysql5.5 mysqld --remove mysql5.5 C:\Program Files\MySQ ...

  4. 转simhash与重复信息识别

    simhash与重复信息识别 在工作学习中,我往往感叹数学奇迹般的解决一些貌似不可能完成的任务,并且十分希望将这种喜悦分享给大家,就好比说:“老婆,出来看上帝”…… 随着信息爆炸时代的来临,互联网上充 ...

  5. SVN版本管理系统的安装 CentOS + Subversion + Apache + Jsvnadmin

    CI服务器:192.168.4.221 root用户操作                            建议安装前更新操作系统 # yum update 更新完成后重启 # reboot 安装 ...

  6. NOJ 1072 The longest same color grid（尺取）

    Problem 1072: The longest same color grid Time Limits:  1000 MS   Memory Limits:  65536 KB 64-bit in ...

  7. PAT天梯赛练习题 L3-011. 直捣黄龙（多关键字SPFA+DFS）

    L3-011. 直捣黄龙 时间限制 150 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 陈越 本题是一部战争大片 —— 你需要从己方大本营出发,一路 ...

  8. Nginx 笔记与总结（7）Location：正则匹配

    在 /usr/local/nginx/conf/nginx.conf 的默认 server 段中,保留默认的 location 信息(之前测试的 location 配置删除): location / ...

  9. Irrlicht引擎I 配置

    游戏是一个比较大的系统,包含了图形引擎.网络.AI.声音.UI等模块,模块的开发可能会分别进行或者采用开源项目,Irrlicht引擎基本包含了这些模块,不过在使用中也会陆续加入其它的模块.以前开发的程 ...

  10. 自动配置IP地址.bat

    ※※※※※※※※※※※※※※※※※※※※※※※※※※※※ @echo     ※                                                    ※ @echo  ...