zoukankan      html  css  js  c++  java
  • CSS居中完全解决方案

    上次面试面试官问到了,问了个定宽局中和不定宽局中,下来我把所有有关CSS居中都总结了一下

    原文摘自我的前端博客,欢迎大家来访问

    水平居中

    行内元素

    把行内元素嵌套在一个DIV中,并且在DIV中设置以下样式

    a{
    		text-align: center;
    	}

    块级元素

    对于定宽的块级元素,我们要设置起margin-top,margin-right 为auto

    .center{
    		margin: 0 auto;
    	}

    多个块级元素(inline-block)

    多个块级元素,我们将其display设置为inline-block;然后将父级元素设置一下属性

    div{
    		text-align: center;
    	}

    多个块级元素(flex)

    设置需要水平居中的块状元素的父元素display为flex ,并且justify-content属性为center即可

    body{
    	  display: flex;
    	  justify-content: center;
    	}

    垂直居中

    单行 行内元素

    将行内元素的height和line-height设置为一致即可

    a{
    	  height: 200px;
    	  line-height:200px;  
    	}

    多行 行内元素

    如果行内元素文字过多产生多行,则在父级元素设置display: table-cell;vertical-align:middle;

    .container{
    		width: 300px;
    		height: 300px;
    		display: table-cell;
    		vertical-align:middle;
    	}

    已知高度的块级元素

    将块级元素设置绝对定位,top为50%,margin-top:-height/2

    div{
    	  height: 100px;
    	  position: absolute;
    	  top: 50%;
    	  margin-top: -50px;
    	  padding:0; 
    	}

    未知高度的块级元素

    使用CSS translate,将块级元素设置绝对定位,top为50%,transform: translateY(-50%);

    div{
    	  position: absolute;
    	  top: 50%;
    	  transform: translateY(-50%);
    	  padding:0; 
    	}

    水平垂直居中

    已知高度、宽度的元素

    将块级元素设置绝对定位,top为50%,left:50%;margin-top:-height/2;margin-left:-width/2

    div{
    		width: 150px;
    		height: 150px;
    		position: absolute;
    		top: 50%;
    		left: 50%;
    		margin-top: -75px;
    		margin-left: -75px;
    	}

    已知高度、宽度的元素(flex)

    给父级使用flex布局

    div{
    		display: flex;
    		justify-content:center;
    		align-items: center;
    	}

    未知高度、宽度的元素

    使用CSS translate

    div{
    	    position:absolute;
    		top:50%;
    		left:50%;
    		-webkit-transform:translate(-50%,-50%);
    		-moz-transform:translate(-50%,-50%);
    		transform:translate(-50%,-50%);
    	}
  • 相关阅读:
    241. Different Ways to Add Parentheses java solutions
    89. Gray Code java solutions
    367. Valid Perfect Square java solutions
    46. Permutations java solutions
    116. Populating Next Right Pointers in Each Node java solutions
    153. Find Minimum in Rotated Sorted Array java solutions
    判断两颗树是否相同
    求二叉树叶子节点的个数
    求二叉树第k层的结点个数
    将二叉排序树转换成排序的双向链表
  • 原文地址:https://www.cnblogs.com/hacke2/p/4002745.html
Copyright © 2011-2022 走看看