CSS布局与居中

1.左右布局

双浮动|左右布局：

image

<figcaption style="margin-top: calc(0.666667em); padding: 0px 1em; font-size: 0.9em; line-height: 1.5; text-align: center; color: rgb(153, 153, 153);">双浮动，左右布局，右边自适应</figcaption>

双浮动：

1. 在子元素下面添加float，在父元素上面加上clear，清除浮动效果后父元素的塌陷。
2. 右边div加上%显示，可以根据页面的伸缩而拉伸，即为自适应。

---

2.左中右布局：

• 左中右布局布局与左右布局类似，就是中间多了一栏，也可以称为三栏布局。
• 首先在HTML结构上，相比左右布局，多了一个div，因为要多一个容器来容纳“中"。

image image

<figcaption style="margin-top: calc(0.666667em); padding: 0px 1em; font-size: 0.9em; line-height: 1.5; text-align: center; color: rgb(153, 153, 153);">添加了多一个div来容纳中“蓝色”，子元素设置浮动，父元素清除</figcaption>

1. 在子元素上设置浮动，父元素清除，记得要清除，这是浮动属性会容易造成bug的原因。
2. 也就是比左右布局多了一条div，跟float，其他的差别不大

---

3.水平|垂直居中

我们先来说说水平居中，水平居中有很多种，常用的有：一段文字在一个块级元素里面水平居中，一个块级元素在一个页面里面水平居中。

我们一个一个来，先来说说：

• 行内元素文字在一个块级元素里面水平居中

image

<figcaption style="margin-top: calc(0.666667em); padding: 0px 1em; font-size: 0.9em; line-height: 1.5; text-align: center; color: rgb(153, 153, 153);">text-align:center</figcaption>

• 一个块级元素在一个页面里面水平居中：

image

<figcaption style="margin-top: calc(0.666667em); padding: 0px 1em; font-size: 0.9em; line-height: 1.5; text-align: center; color: rgb(153, 153, 153);">margin: 0 auto; 上下为0，左右自适应</figcaption>

直接通过设置外边距使一个块级元素在页面水平居中。

---

垂直居中：

行内元素的垂直居中：

image

<figcaption style="margin-top: calc(0.666667em); padding: 0px 1em; font-size: 0.9em; line-height: 1.5; text-align: center; color: rgb(153, 153, 153);">直接设置line-height属性与块级元素高度一样即可</figcaption>

块级元素的垂直居中：

image

<figcaption style="margin-top: calc(0.666667em); padding: 0px 1em; font-size: 0.9em; line-height: 1.5; text-align: center; color: rgb(153, 153, 153);">在已知块级元素高度情况下，利用定位完成。</figcaption>

水平垂直居中（多用于页面的登录框）：

image

   position: absolute;
    margin:auto;
    left:0;
    top:0;
    right:0;
    bottom:0

---

最后给大家带来一点CSS的小技巧，感谢互联网大神们的分享

CSS实现纯动画导航：

我们先来看一下效果：

image

HTML代码

HTML内容是一些用作菜单的链接，我们在里面添加了一些额外的SPAN标记来帮助实现3D效果：

image

在A链接标记旁边是一系列的SPAN元素，动画演示过程中，它将用来表现3D立方体的“正面”和“背面”。这些SPAN里的文字和A链接里的文字是一致的。

CSS代码

这个动画的过程就是实现3D变换和元素位置变化。但实际上A链接是没有移动的，动的是SPAN标签，而且是最外层的SPAN标签，内部的SPAN标签被初始化在它的位置上，以后就不做任何变动。每个元素都可以向上翻，并要翻回来，我们使用的是CSS transforms。

image

如果你想看看正面和反面各自是如何旋转移动的，我强烈推荐你们试一下，将其中的一个设置为display: none，让鼠标悬停在它们上面，你将会看到它们各自将完成整个动画的哪一部分动作。

这种实现方式的唯一的缺点是有重复的菜单名称，虽然技术上是隐藏看不出来的，但从代码质量上说存在代码重复问题。然而，从视觉效果上看，它的动画非常顺滑，毫无瑕疵。没有JavaScript，Flash或canvas技术，只是一些简单的CSS标记，这技术CSS动画….一种我们web程序员都应该感谢的技术。----------资料引用：

纯CSS实现菜单、导航栏的3D翻转动画效果css3_CSS网页制作_脚本之家​www.jb51.net

图标