zoukankan      html  css  js  c++  java
  • css各种居中解决方法

    一、水平居中

    1、行内元素

    1 text-align: center;

    2、块级元素

    1 margin: 0 auto;

    上面两种方法的前提是父元素都没有被float影响

    3、多个块级元素

          父元素设置text-align:center。子元素设置inline-block。

    1 .inline-block-center {
    2   text-align: center;
    3 }
    4 .inline-block-center div {
    5   display: inline-block;
    6   text-align: left;

          或者使用flex布局

    1 flex-center {
    2   display: flex;
    3   justify-content: center;
    4 }

    二、垂直居中

    1、单个行内元素

    可以设置line-height=height

    2、多个行内元素

    方法一:可以将元素转为table样式,再设置vertical-align:middle

    方法二:使用flex布局

    1 flex-center {
    2   display: flex;
    3   justify-content: center;
    4 }

    注意:flex布局的前提是父元素必须设置height

    3、块级元素

    已知高度:父元素relative,子元素absolute等等

    未知高度:

    1 .parent {
    2   position: relative;
    3 }
    4 .child {
    5   position: absolute;
    6   top: 50%;
    7   transform: translateY(-50%);
    8 }

    flex布局:

    1 .parent {
    2   display: flex;
    3   flex-direction: column;
    4   justify-content: center;
    5 }
  • 相关阅读:
    2019 西安邀请赛 D
    time 库
    字符串处理+格式化输出
    数据类型
    turtle1
    格式问题
    字符串1
    基础操作
    链表去重
    PAT 1093
  • 原文地址:https://www.cnblogs.com/endlessmy/p/8651859.html
Copyright © 2011-2022 走看看