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 }
  • 相关阅读:
    html5之缩放图标
    html5之图片的缩放scale
    html5之打地鼠100%胜率
    html5之调整旋转中心点
    html5之三角旋转
    html5中模块居中
    html5中2d图片旋转
    html5之动态移动图
    html5之steps
    读微信开放文档未解记录
  • 原文地址:https://www.cnblogs.com/endlessmy/p/8651859.html
Copyright © 2011-2022 走看看