关于CSS设置水平以及垂直居中的解决方案

想要水平居中?

  • 内联的元素(文字)?

    .center-children { text-align: center;}
  • 块级元素?

    .center-me { margin: 0 auto;}
  • 如果有多个块级元素呢?

    .inline-block-center {
      text-align: center;
      }
    .inline-block-center div {
      display: inline-block;
      text-align: left;
    }
    .flex-center {
    display: flex;
    justify-content: center;
    }

想要垂直居中?

  • 内联的元素?

    • 如果只有一行的话,可以设置上下内边距为相同的值。
    • 如果是多行文本的话,可以模拟表格。
      .center-table {
      display: table;
      height: 250px;
      background: white;
      width: 240px;
      margin: 20px;
      }
      .center-table p {
      display: table-cell;
      margin:;
      background: black;
      color: white;
      padding: 20px;
      border: 10px solid white;
      vertical-align: middle;
      }
      .flex-center-vertically {
      display: flex;
      justify-content: center;
      flex-direction: column;
      height: 400px;
      }
      块级元素?
      
      知道元素高度?
      .parent {
      position: relative;
      }
      .child {
      position: absolute;
      top: 50%;
      height: 100px;
      margin-top: -50px; /* account for padding and border if not using box-sizing: border-box; */
      }
  • 元素高度未知?
    .parent {
    position: relative;
    }
    .child {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    }
  • flex布局
    .parent {
    display: flex;
    flex-direction: column;
    justify-content: center;
    }

    原文:

    http://www.jianshu.com/p/14d519bc8c30

css设置水平垂直居中的更多相关文章

  1. CSS实现水平|垂直居中漫谈

    利用CSS进行元素的水平居中,比较简单,手到擒来:行级元素设置其父元素的text-align center,块级元素设置其本身的left 和 right margins为auto即可.而撸起垂直居中, ...

  2. 纯CSS制作水平垂直居中“十字架”

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. CSS制作水平垂直居中对齐

    作为前端攻城师,在制作Web页面时都有碰到CSS制作水平垂直居中,我想大家都有研究过或者写过,特别的其中的垂直居中,更是让人烦恼.这段时间,我收集了几种不同的方式制作垂直居中方法,但每种方法各有千秋呀 ...

  4. CSS实现水平垂直居中的1010种方式

    转载自:CSS实现水平垂直居中的1010种方式 划重点,这是一道面试必考题,很多面试官都喜欢问这个问题,我就被问过好几次了 要实现上图的效果看似很简单,实则暗藏玄机,本文总结了一下CSS实现水平垂直居 ...

  5. 你知道CSS实现水平垂直居中的第10种方式吗?

    你知道CSS实现水平垂直居中的第10种方式吗? 仅居中元素定宽高适用: absolute + 负 margin absolute + margin auto absolute + calc 居中元素不 ...

  6. css实现水平 垂直居中

    css实现水平居中 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  7. CSS制作水平垂直居中对齐 多种方式各有千秋

    作为前端攻城师,在制作Web页面时都有碰到CSS制作水平垂直居中,我想大家都有研究过或者写过,特别的其中的垂直居中,更是让人烦恼.这段时间,我收 集了几种不同的方式制作垂直居中方法,但每种方法各有千秋 ...

  8. css各种水平垂直居中

    css各种水平垂直居中,网上查了一下,总结以下几种 line-height垂直居中 缺点,仅限于单行文字 .item{ text-align: center; height: 100px; line- ...

  9. CSS如何水平垂直居中?

    CSS如何水平垂直居中? 1.CSS如何实现水平居中? margin: 0 auto 2.CSS如何实现水平垂直居中? 首先设置一个div元素,设置背景颜色以便看出变化.代码如下: <!DOCT ...

随机推荐

  1. AFNetworking (3.1.0) 源码解析 <五>

    这次主要开始讲解一下文件夹Serialization下的类AFURLRequestSerialization. AFURLRequestSerialization类遵守`AFURLRequestSer ...

  2. Unity3D基础学习 利用NGUI的Texture播放视频

    利用NGUI播放视频,首先你得导入你的视频 你的电脑中必须安装QuickTime软件,没有,去下一个,如果是Windows系统,安装完之后重启. 接下来转换你的视频格式,如果你的视频在QuickTim ...

  3. .NET页面301跳转处理

    //301跳转Response.Status = "301 Moved Permanently";Response.AddHeader("Location", ...

  4. iOS UITextField 设置内边距

    [self.yourTextField setValue:[NSNumber numberWithInt:5] forKey:@"_paddingTop"]; [self.your ...

  5. 安卓(android)建立项目时失败,出现Android Manifest.xml file missing几种解决方法?(总结中)

    安卓(android)建立项目时失败.出现AndroidManifest.xml file missing几种解决方法?(总结中) Eclipse新建项目.遇到这种问题.注意例如以下: 1.文件名称最 ...

  6. 经典C面试题

    12个有趣的C语言面试题 面试题C 摘要:12个C语言面试题,涉及指针.进程.运算.结构体.函数.内存,看看你能做出几个! 1.gets()函数 问:请找出以下代码里的问题: #include< ...

  7. C# List集合转Json字符串示例代码

    将list集合转换为Json字符串简单实现代码: public static string GetJosn(List<CalendarInfo> list) { string jsonSt ...

  8. (转) Android平台上关于IM的实践总结

    前言 IM通信在互联网发展到现在已经是码农的世界里人尽皆知的技术,特别在当下移动互联网迅猛发展的时代这种技术的开发也更加火热,其中老牌的代表作就有QQ和MSN,和最近新崛起的微信,默默,易信,来往等眼 ...

  9. VS快速定位文件、代码插件——DPack

    之前用Myeclipse开发一个Java项目,发现其中“Open Resource”(Ctrl+Shirft+R)的功能比较好用,回到.Net后就找了找VS相应的功能,试了几个后觉得Dpack比较好用 ...

  10. mysql sql语句分析

    1. SELECT     a.id    ,b.order_id,b.attr  FROM    tourist_order a     LEFT JOIN order_attr b     ON ...