`

CSS居中小结

    博客分类:
  • CSS
css 
阅读更多

一、水平居中:

    1.text-align:center;

    2.margin:0 auto;或margin:auto;(要设置宽度,否则没有效果。)

    3.position:absolute;left:50%;(绝对定位,一般不使用)

    4.position:relative;left:50%;(相对定位)

二、竖直居中

    1.{

      line-height:500px;(所需页面总高度)

      vertical:middle;

}

    2.单行内容居中:

      {

        height: 500px;

line-height: 500px;

overflow: hidden;

}

    3.多行内容居中:{

      padding-top: 200px;

      padding-bottom: 200px;(与上下边界的距离相等)

}

    4.{

      display: table-cell;(把元素当作表格单元来显示)

      height: 300px;

      vertical-align: middle;

}

     5.{

       position:fixed;(IE不支持)

       width:180px;

       height:180px;

       top:50%;

       left:50%;

       margin-top:-90px;

       margin-left:-90px;

}

     6.{

        position:absolute;

        width:140px;

height:140px;

top:0;

right:0;

bottom:0;

left:0;

margin:auto;

background:black;

}

分享到:
评论

相关推荐

    css样式小结

    - `text-transform`: 改变文本的大小写,如`text-transform:uppercase;`(全大写)和`text-transform:lowercase;`(全小写)。 - `text-align`: 设置文本的水平对齐方式,包括`text-align:right;`(右对齐)、`text-...

    div中内容上下居中小结

    DIV 中内容上下居中小结 在前端开发中,DIV 中内容上下居中是一个常见的问题。通过对 DIV 中内容上下居中的四种常见处理方式的总结,本文旨在帮助开发者快速解决此类问题。 情形一:DIV 限高,内容长度限一行 在...

    CSS中关于居中的小技巧个人小结

    在网页设计中,CSS居中技术是一个经常被使用到的布局方法,它能够使元素在父容器中水平和垂直居中显示,从而达到设计上的美观和对齐的需求。本文将整理和分享一些在CSS中实现居中的技巧,这些技巧对于提高Web开发的...

    CSS盒子居中的常用的几种方法(小结)

    用css的position属性 <style type="text/css"> .div1 { width: 100px; height: 100px; border: 1px solid #000000; position: relative; } .div2 { width: 40px; height: 40px; background-color: ...

    《CSS全程指南》随书光盘

    内容简介 本书将最有用的CSS技术汇总在一起,在介绍基本的CSS概念和最佳实践之后,讨论了核心的CSS技术,例如图像、链接、列表操纵、表单设计等。每一章内容由浅入深,直到建立比较复杂的示例。...13.3 小结 315

    手把手教你CSS水平、垂直居中的10种方式(小结)

    面试必备,工作一定会用到。emmm大家都懂的,话不多说,先直接贴一个总结和效果图。 总结 PC端有兼容性要求,子元素宽高固定,推荐absolute + 负margin PC端有兼容要求,子元素宽高不固定,推荐absolute + ...

    关于html水平垂直居中的问题小结

    CSS3的`display: flex`提供了一种更现代且灵活的居中方法,可以同时实现水平和垂直居中: ```css .wrap { display: flex; justify-content: center; /* 水平居中 */ align-items: center; /* 垂直居中 */ ...

    CSS布局方案小结

    总结来说,CSS布局方案小结提供的这些方法可以覆盖不同的浏览器兼容性需求以及布局需求。随着浏览器对CSS新特性的不断支持,使用flex布局的方法变得越来越流行和强大,它可以简化代码并提供更多样化的布局选项。然而...

    JS实现图片垂直居中显示小结

    首先设置父容器的宽度和高度,然后将子容器的宽度和高度设定得比父容器小。通过给子容器设置相对定位(position: relative),然后使用left和top属性,并赋值为百分比,可以控制子容器相对于父容器的偏移量。这种...

    css两种垂直居中对齐解决方案(小结)

    第一种垂直居中方法 利用vertical-align:middle进行垂直方向上的居中对齐,此方法需要满足的条件: 设置父元素的行高line-height等于父元素height的高度 子元素必须是行内块级元素display:inline-block; 子元素...

    HTML+CSS布局(常用css控制属性)小结

    在这个小结中,我们将探讨一些常用的CSS控制属性,这些属性对于创建响应式和有组织的页面布局至关重要。 首先,CSS布局的基本属性包括`width`、`height`、`margin`和`padding`。在示例中,`#contner`元素的宽度设置...

    多浏览器css兼容分析小结

    ### 多浏览器CSS兼容分析小结 #### CSS兼容要点概览 本文档旨在总结多浏览器环境下CSS兼容性问题及其解决方案,对于前端开发者来说至关重要。在实际项目开发过程中,经常会遇到不同浏览器对CSS的支持程度和解析...

    CSS常用浏览器兼容调整小结

    - DOCTYPE声明会影响CSS的处理方式,尤其是布局上的居中和尺寸设置。 - Firefox中DIV的margin-left和margin-right设置为auto即可居中,而IE浏览器则不行。 - Firefox支持!important,可以用来为Firefox特别设置...

    HTML5 + CSS 网页

    #### 小结 通过对HTML5和CSS的学习,我们可以了解到,通过合理的使用 `<p>`、` `、`<nobr>` 以及 `<div>` 等标签,能够有效地控制网页中文字的布局。无论是简单的换行控制还是复杂的对齐需求,都可以通过这些...

    css 跨浏览器实现float-center.docx

    Positoin、absolute、Relative 的一些讨论`、`relative absolute 无法冲破的等级问题解决`、`Div CSS absolute 与 relative 的区分小结`、`position:relative/absolute 无法冲破的等级解决`以及`rs.absolutepage=-1 ...

    DIV+CSS 浏览器兼容性小结

    - 垂直和水平居中可以通过line-height、vertical-align、margin: 0 auto等方式实现,但并非所有情况都适用。 - a标签内的样式,设置`display: block;`可以让其像块级元素一样显示。 - 浮动元素在IE下可能会有...

Global site tag (gtag.js) - Google Analytics