How to Make a Horizontally and Vertically Centered Div

Creating a website is fun, but for people who are used to working on the backend, sometimes it can be frustrating when they have to make centered div. This time, I want to share 3 methods to center a div.

Using FlexBox

.container-1 {
    height: 20vh;
    border: 1px solid red;
    display: flex;
    justify-content: center;
    align-items: center;
}

Hello…!!!

Using Grid

.container-2 {
    height: 20vh;
    border: 1px solid red;
    display: grid;
    place-items: center;
}

Hello…!!!

Using Absolut Positioning

.container-3 {
    position: relative;
    border: 1px solid red;
    height: 20vh;
}

.container-3 p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
}

Hello…!!!

Which one is your favorite? Please leave a comment.

WooCommerce Plugin for Adding Custom Tab to All Products

Are you tired of the tedious and time-consuming process of adding custom tabs to your WooCommerce products one by one? I understand the pain, and that’s why I present to you the ultimate solution: WooCommerce Custom Product Tabs!

<?php
/*
Plugin Name: WooCommerce Custom Product Tab
Plugin URI: https://ryanaby.com/woocommerce-plugin-for-adding-custom-tab-to-all-products/
Description: Add tab to all WooCommerce products
Version: 1.0
Author: Ryan Aby
Author URI: https://ryanaby.com/
*/

if ( ! class_exists( 'WCPT_Custom_Product_Tab' ) ) {
    class WCPT_Custom_Product_Tab {

        public function __construct() {
            add_filter( 'woocommerce_settings_tabs_array', array( $this, 'add_settings_tab' ), 50, 1 );
            add_action( 'woocommerce_settings_tabs_wcpt_custom_tab', array( $this, 'settings_tab' ) );
            add_action( 'woocommerce_update_options_wcpt_custom_tab', array( $this, 'update_settings' ) );

            // Add custom tab to product pages
            add_filter( 'woocommerce_product_tabs', array( $this, 'add_custom_tab' ) );
        }

        public function add_settings_tab( $tabs ) {
            $tabs['wcpt_custom_tab'] = esc_html__( 'Custom Product Tab', 'woocommerce-custom-product-tab' );
            return $tabs;
        }

        public function settings_tab() {
            woocommerce_admin_fields( self::get_settings() );
        }

        public function update_settings() {
            woocommerce_update_options( self::get_settings() );
        }

        public function get_settings() {
            $settings = array(
                'section_title' => array(
                    'name' => esc_html__( 'Custom Product Tabs Settings', 'woocommerce-custom-product-tab' ),
                    'type' => 'title',
                    'desc' => '',
                    'id'   => 'wcpt_custom_tab_section_title'
                ),
            );

            for ( $i = 1; $i <= 3; $i++ ) {
                $settings["custom_tab_title_$i"] = array(
                    'name' => esc_html__( "Custom Tab Title $i", 'woocommerce-custom-product-tab' ),
                    'type' => 'text',
                    'desc' => esc_html__( "Title for Custom Tab $i", 'woocommerce-custom-product-tab' ),
                    'id'   => "wcpt_custom_tab_title_$i",
                );

                $settings["custom_tab_content_$i"] = array(
                    'name' => esc_html__( "Custom Tab Content $i", 'woocommerce-custom-product-tab' ),
                    'type' => 'textarea',
                    'desc' => esc_html__( "Content for Custom Tab $i", 'woocommerce-custom-product-tab' ),
                    'id'   => "wcpt_custom_tab_content_$i",
                    'css'  => 'height: 150px;',
                );
            }

            $settings['section_end'] = array(
                'type' => 'sectionend',
                'id'   => 'wcpt_custom_tab_section_end',
            );

            return apply_filters( 'wcpt_wcpt_custom_tab_settings', $settings );
        }

        public function add_custom_tab( $tabs ) {
            for ( $i = 1; $i <= 3; $i++ ) {
                $custom_tab_title = get_option( "wcpt_custom_tab_title_$i", '' );
                $custom_tab_content = get_option( "wcpt_custom_tab_content_$i", '' );

                if ( ! empty( $custom_tab_title ) ) {
                    $tabs["wcpt_custom_tab_$i"] = array(
                        'title'    => esc_html( $custom_tab_title ),
                        'priority' => 50 + $i,
                        'callback' => function () use ( $custom_tab_content ) {
                            echo '<div class="wcpt-custom-tab-content">' . apply_filters( 'the_content', $custom_tab_content ) . '</div>';
                        },
                    );
                }
            }

            return $tabs;
        }
    }

    new WCPT_Custom_Product_Tab();
}