<div id="parent">
<!-- 定义子级元素 -->
<div id="child">居中布局</div>
</div>

过以下CSS样式代码实现水平方向居中布局效果

.parent{position:relative;}
.child{position: absolute;top: 50%;transform: translateY(-50%)}

优点:

父级元素是否脱离文档流, 不影响子级元素垂直居中效果

缺点:

transform属性是CSS3中新增属性, 浏览器支持情况不好

文给大家分享的是：画APP原型时，设置手机壳为页面背景，内嵌框架为手机屏幕（原型的内容区）的情况下，保持手机壳、手机屏幕与页面之间，左右/垂直居中对齐（兼容不同尺寸的电脑屏幕）

一、页面背景的设置

1. 设置页面居中对齐；

2. 设置页面背景颜色（灰背景色值：#F5F5F5，黑背景色值：#121212，或自行选择）；

3. 导入手机壳为页面背景图片；

4. 设置页面背景垂直居中对齐；

5. 设置页面背景左右居中对齐；

6. 设置页面背景不重复。

二、内嵌框架（手机屏幕）的设置

1、在页面中拖入一个内嵌框架（手机屏幕，即显示原型的内容区，下同），命名为【Frame】，设置宽度为：375px，高度为：667px；

2、选择内嵌框架（手机屏幕）默认打开的页面（在浏览器中预览时，该内嵌框架默认显示的页面）；

3、隐藏内嵌框架（手机屏幕）的边框；

4、框架滚动条选择【从不显示】。

三、添加页面事件-设置内嵌框架（手机屏幕）垂直居中对齐

前面已设置页面居中对齐。

所以预览时，内嵌框架（手机屏幕）会兼容不同宽度的电脑屏幕，左右居中显示在手机壳中。

为兼容不同高度的电脑屏幕，让内嵌框架（手机屏幕），垂直居中显示在手机壳中，

接下来还要添加页面事件：

窗口尺寸改变时，移动内嵌框架（手机屏幕）的头部的纵坐标值（y坐标值）

=（页面高度-内嵌框架高度）/2

=(Window.height-frame.height)/2

=内嵌框架（手机屏幕）与页面垂直居中对齐

完成后，可以尝试将页面放大或缩小，手机壳及原型内容始终会保持左右/垂直居中对齐。

本文结束了哈。

作者：亮亮，公众号：Axure产品原型

本文由 @亮亮 原创发布于人人都是产品经理，未经许可，禁止转载

家好，今天给大家介绍一款，带图标的垂直导航菜单的html页面源码（图1）。送给大家哦，获取方式在本文末尾。

点击每个按钮时，都有切换特效，并显示按钮的说明，看起来非常不错（图2）

代码完整，需要的朋友可以下载（图3）

本源码编码：10148，需要的朋友，点击下面的链接后，搜索10148，即可获取。

就爱UI - 分享UI设计的点点滴滴