实现水平居中的几种方法

实现水平居中的几种方法

---

• 绝对定位：

					.father {
                            width: 300px;
                            height: 300px;
                            background-color: blue;
                            position: relative;
                        }
                        .son {
                            width: 100px;
                            height: 100px;
                            background-color: red;
                            position: absolute;
                            top: 50%;
                            left: 50%;
                            transform: translate(-50%,-50%);
                        }

• flex布局：

                        .father {
                            width: 300px;
                            height: 300px;
                            background-color: blue;
                            display: flex;
                            justify-content: center;
                        }
                        .son {
                            width: 100px;
                            height: 100px;
                            background-color: red;
                            /*子元素使用align-self: center可以垂直居中*/
                            /*align-self: center;*/
                        }

• 定位+margin:auto:

                        .father {
                                    width: 300px;
                                    height: 300px;
                                    background-color: black;
                                    position: relative;
                                }
                                .son {
                                    width: 100px;
                                    height: 100px;
                                    background-color: red;
                                    position: absolute;
                                    margin: auto;
                                    top: 0;
                                    right: 0;
                                    bottom: 0;
                                    left: 0;
                                }