关于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. [置顶] VB 中chr(10)、chr(13)和vblf、vbcr、vbcrlf的分别

    1.共同点: chr(10):换行,相当于VBLF chr(13):回车,相当于VBCR chr(13)+chr(10):回车+换行,相当于VBCRLF cr是回车,只有回车,是到本行的最头上:lf是 ...

  2. Oracle执行计划——all_rows和first_rows(n) 优化器模式

    0. 环境创建 SQL> create usertest identified by test 2 default tablespace users 3 temporary tablespace ...

  3. 学习微信小程序之css16常见布局

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

  4. [C#技术] .NET平台开源JSON库LitJSON的使用方法

    一个简单示例: String str = "{’name’:’cyf’,’id’:10,’items’:[{’itemid’:1001,’itemname’:’hello’},{’itemi ...

  5. Android实现后台长期监听时间变化

    1.首先我们的目的是长期监听时间变化,事实上应用程序退出. 通过了解我们知道注冊ACTION_TIME_TICK广播接收器能够监听系统事件改变,可是 查看SDK发现ACTION_TIME_TICK广播 ...

  6. URL具体解释

    浏览器因特网资源:URL是浏览器寻找信息时所需的资源位置.通过URL.应用程序才干找到并使用共享因特网上大量的数据资源. 大部分URL都遵循一种标准的格式: ①HTTP协议(http://或者http ...

  7. 大数据笔记03:大数据之Hadoop的安装

    1.安装Hadoop (1)准备Linux环境 (2)安装JDK (3)配置Hadoop 2.准备Linux环境 (1)我们用户可能都是使用Windows环境,一般用户都是先安装虚拟机,然后在虚拟机上 ...

  8. css中同时用头部引入和外部引入对同一个标签进行样式设置,哪一个优先级高。

    这段是html中的代码 <!doctype html> <html lang="en"> <head> <meta charset=&qu ...

  9. 使用Application_Error捕获站点错误并写日志

    Global.ascx页面使用以下方法即可捕获应用层没有try cath的错误 protected void Application_Error(Object sender, EventArgs e) ...

  10. Android开发手记(13) 几种Alertdialog的使用

    本文主要讨论七种形式的AlertDialog,及其编写方法. 1.退出 在用户退出的时候提示用户是否退出,含有“确定”和“退出”两个按键. btnExit.setOnClickListener(new ...