css居中方法

作者: 崔磊8080 | 来源:发表于2018-07-10 19:56 被阅读2次

css居中方法

水平居中

  • 内联:爸爸身上写 text-align:center;
  • 块级:
    • margin-left: auto; margin-right: auto;
    • display:flex

垂直居中

七种方式实现垂直居中

1.table自带功能

2.100% 高度的 afrer before 加上 inline block

3.div 装成 table

4.margin-top -50%

5. translate -50%

6. absolute margin auto

7. flex

.parent{
    dispaly:flex;
    justify-content: center;
    align-item: center;
}

如果 .parent 的 height 不写,你只需要 padding: 10px 0; 就能将 .child 垂直居中;
如果 .parent 的 height 写死了,就很难把 .child 居中。
忠告:能不写 height 就千万别写 height。

相关文章

  • CSS解决盒模型居中的问题

    CSS实现盒子模型水平居中、垂直居中、水平垂直居中的多种方法 CSS实现盒子模型水平居中的方法 全局样式 第一种:...

  • Css让div在屏幕上居中

    # 让div在屏幕上居中(水平居中+垂直居中)的方法总结 - html代码如下: - Css居中方法 (敲黑板)...

  • CSS垂直居中

    #CSS垂直居中的所有方法 标签(空格分隔): css技巧 --- ##1.利用padding垂直居中(line-...

  • CSS - 垂直水平居中方法

    前言 总括:整理 css 垂直水平居中方法,区分内联元素与块级元素 CSS垂直居中和水平居中 用css让一个容器水...

  • CSS居中小结

    下面是CSS居中的几种方法: 水平居中元素: 通用方法,元素的宽高未知 方式一:CSS3 transform 方式...

  • CSS布局(不完全)总结

    CSS布局(不完全)总结 实现水平居中布局的几种方式 方法一: 通过以下CSS代码实现水平居中布局 方法二: 通过...

  • CSS垂直居中,你会多少种写法?

    CSS控制居中是前端开发中非常常用的布局技能,本文列出几种CSS控制元素居中的几种方法。  谈及HTML元素居中展...

  • CSS水平垂直居中总结

    CSS水平居中、垂直居中、水平垂直居中方法总结 文字的水平居中: 单行文字的垂直居中: 让有宽度的div水平居中:...

  • 垂直居中的方法

    行内元素居中 html css before元素居中 html css table-cell居中 css 垂直居中...

  • CSS图片居中(水平居中和垂直居中)

    css图片水平居中 css图片垂直居中 css图片水平垂直居中

网友评论

    本文标题:css居中方法

    本文链接:https://www.haomeiwen.com/subject/kbmqpftx.html