<class= ' kk '> Horizontal Vertical Center text </View >
. KK { border: 1px solid #000000; width: 200px; height: 200px; margin: 0 Auto; text-align: Center; line-height: 200px;}
One of the line-height needs attention.
<Viewclass= "section"> <Viewclass= "Section__title">Flex-direction:row</View> <Viewclass= "FLEX-WRP"style= "Flex-direction:row;"> <Viewclass= "Flex-item bc_green">1</View> <Viewclass= "Flex-item bc_red">2</View> <Viewclass= "Flex-item bc_blue">3</View> </View></View><Viewclass= "section"> <Viewclass= "Section__title">Flex-direction:column</View> <Viewclass= "FLEX-WRP"style= "Height:300px;flex-direction:column;"> <Viewclass= "Flex-item bc_green">1</View> <Viewclass= "Flex-item bc_red">2</View> <Viewclass= "Flex-item bc_blue">3</View> </View></View>
. FLEX-WRP{Display:Flex;}. flex-wrp. Flex-item.bc_green{width:100px;Height:100px;Line-height:100px;Background-color:Green;}. flex-wrp. flex-item.bc_red{width:100px;Height:100px;Background-color:Red;text-align:Center;Line-height:100px;}. flex-wrp. Flex-item.bc_blue{width:100px;Height:100px;Background-color:Blue;text-align:Center;Line-height:100px;}
CSS: How text is centered horizontally